Next.js Discord

Discord Forum

How do I force parallel routes to hard navigate?

Answered
Arcra posted this in #help-forum
Open in Discord
Avatar
ArcraOP
I made a navigator that changes by route user is viewing with parallel routes.
I am using default.js for root navigator, and due to soft navigation of parallel routes, the navigator does not change when hot reload or something. And also I can't revert to default state when I want to. I must use router.back so the parallel route can be reverted.
So how can I force hard navigation of parallel routes?
Answered by Arcra
Sorry for ambigious description. I was trying to achieve navigator that have default navigator and some specific navigator for specific pages, and optional catch-all not worked for parallel routes for some next.js issues.
I did some research and found [A reddit post about this issue](https://www.reddit.com/r/nextjs/comments/1d9nay4/optional_catch_all_route_does_not_work_with/) and [Example pattern in github which solves this issue](https://github.com/vercel/next-app-router-playground/tree/main/app/patterns/breadcrumbs).
As described in the github repository, I added a catch-all route @navigator/[...path]/page.tsx and root navigator @navigator/page.tsx (These two files renders same root navigator component) and it worked after restarting the dev server.
View full answer

12 Replies

Avatar
joulev
Could you clarify what you meant with a code example? Ideally a minimal reproduction repository
Avatar
ArcraOP
layout.tsx

export default function Layout({
  navigator,
  children,
}: ChildrenProps & { navigator: React.ReactNode }) {
  return (
    <div className="flex size-full">
      <div>
        <DashboardNavigatorRoot>
          {navigator}
        </DashboardNavigatorRoot>
      </div>
      <div className="flex-auto p-16">{children}</div>
    </div>
  );
}

@navigator directory structure
Image
They change when going from default.tsx to projects/:id/page.tsx, but they don't change when
going from projects/:id/page.tsx to default.tsx.
If I use router.back it is changed.
Avatar
ArcraOP
hello?
Avatar
Pink salmon
Even after reading through your messages, i'm still unclear about what you're trying to achieve.

If you want to achieve a hard navigation with parallel routes, then the answer is to use window.location.href, however given that I'm still unsure of what you're trying to specifically achieve, I can't give you more help then that.

How are you navigating from projects/:id/page.tsx to default.tsx? Are you using router.push()?

When I was working with parallel routes with modals, I ran into a similar issue with the trying to hard navigate to the current route using router, both router.push() and router.refresh() didn't achieve the result I wanted, however router.back() was the only part of the API that seemed to interact with parallel routes. To remediate my issue, I used window.location.href. I don't know if it's specifically a bug or intended, however others have brought it up in the issues, however a maintainer basically said that since the functionality is supported by the window.location api, it doesn't make sense to put it as part of router. Parallel routes, although marked as stable, is pretty much still unstable imo, there are just a lot of bugs with it and behaviors you don't expect.

Edit: router.push() technically does interact with parallel routes, but just like I said in my last line, it behaves weirdly and isn't consistent.
Avatar
ArcraOP
Sorry for ambigious description. I was trying to achieve navigator that have default navigator and some specific navigator for specific pages, and optional catch-all not worked for parallel routes for some next.js issues.
I did some research and found [A reddit post about this issue](https://www.reddit.com/r/nextjs/comments/1d9nay4/optional_catch_all_route_does_not_work_with/) and [Example pattern in github which solves this issue](https://github.com/vercel/next-app-router-playground/tree/main/app/patterns/breadcrumbs).
As described in the github repository, I added a catch-all route @navigator/[...path]/page.tsx and root navigator @navigator/page.tsx (These two files renders same root navigator component) and it worked after restarting the dev server.
Answer
Avatar
Pink salmon
Oh ok, I was gonna recommend just putting a page.tsx alongside the default.tsx. Since default.tsx is meant to be used as a fallback for the slot if there's any error in loading the slot, it means if there isn't any error, it would technically not load it. The reason it loads the first time is because of hard navigation which causes the parallel route to error out and call the default.
The catchall works fine, but I think you probably don't even need the catchall tbh
Avatar
ArcraOP
oh does page.tsx covers all sub routes?
Avatar
Pink salmon
It doesn't, I'm just saying it should cover the use-case of trying to get back to the root. The catchall works fine as a fallback in any case tho.
It really depends on if you care about handling the case where the url isn't something you expect or not. However since you already did it, I think it's fine to leave it, it's more secure that way
Avatar
ArcraOP
ok thanks for helping, the issue is now solved