Parallel/Intercepting routes not working

Unanswered

Alligator mississippiensis posted this in #help-forum

Alligator mississippiensisOP

2023-08-18T04:35:20.000Z

Repro: https://github.com/owen-dyer/parallel-intercepting-routes-test

If you navigate to the home page (/) and click on the 'login' or 'signup' links in the top left you will get a 404 page not found error. If you navigate to /login or /signup directly (manually change the url) it will take you to the page. I believe this is an issue with route groups, however, I am not sure.

19 Replies

Alligator mississippiensisOP

2023-08-18T04:40:45.000Z

I just tested the exact same thing but I moved

@modal login & signup

directories out of the

(auth)

route group

It worked totally fine with these changes so there is a bug with route groups and intercepting/parallel routes

fuma

2023-08-18T04:55:13.000Z

Ok I found the problem, you have to create a layout under the route group in order to use intercept routes

So in (auth)/layout.tsx

import Navbar from '@/components/navigation/Navbar'

export default function AuthLayout(
  props: {
    children: React.ReactNode, modal: React.ReactNode,
  }) {
  return (
    <>
        {props.children}
        {props.modal}
    </>
  )
}

And remove props.modal from the root layout.

Alligator mississippiensisOP

2023-08-18T04:57:23.000Z

https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#conditional-routes
ideally it would work in the root layout so I could do this

I can do it the way that you have suggested and it will work also but it would be nice to have it in the root layout

fuma

2023-08-18T04:58:40.000Z

I don't sure if it's a bug or something, you can report it in their Github repository

@fuma I don't sure if it's a bug or something, you can report it in their Github repository

Alligator mississippiensisOP

2023-08-18T04:59:10.000Z

it seems like it might be a bug since the point of route groups is that they are ignored

but it might be intended

I will try what you posted above

thank you for helping ðŸ™‚

@fuma So in `(auth)/layout.tsx` tsx import Navbar from '@/components/navigation/Navbar' export default function AuthLayout( props: { children: React.ReactNode, modal: React.ReactNode, }) { return ( <> {props.children} {props.modal} </> ) } And remove `props.modal` from the root layout.

Alligator mississippiensisOP

2023-08-18T16:47:10.000Z

using this I still get 404 for the modal pages

do I need a page.tsx in (auth)/ also?

it is trying to access the page but doesnt work

Alligator mississippiensisOP

2023-08-18T17:07:28.000Z

Another update:
When I am on /login or /signup (from manually entering the url) and I click on the /login or /signup link in the navbar the modal opens just fine

However, when I am on the home page (/) and I click on the /login or /signup links in the navbar I get a 404 and I must enter the url manually