parallel routing modal

[noble rune]

hi there, I have a page which displays a table. each row has a button which should open a modal. currently I have this folder structure:

orders
|- @modal
|  |- modal
|  |  |- default.tsx
|  |  |- page.tsx
|  |
|  |- page.tsx
|  |- default.tsx
|
|- default.tsx
|- layout.tsx
|- page.tsx
|- table.tsx

i just created all these default.tsx files, because I just wanted to make sure the problem is not that they are missing. table.tsx is just the table component. in the layout I am getting modal as prop and display it. now when the button in the table is clicked, it redirects from /orders to /orders/modal which should just display the current page with the table but the modal should be on top. what it actually does, is giving me a 404. What am I doing wrong?

[winged root]

Hi @noble rune. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Based on the information provided in the extracts, it seems like you're on the right track with using parallel routing for modals in Next.js. However, there are a few things you might want to check:

1. Correct use of default.tsx: The default.tsx file is used to ensure that the contents of the modal don't get rendered when it's not active. It should return null. Make sure your default.tsx files are correctly set up. Here's an example from the Next.js documentation (https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#modals):

export default function Default() {
 return null
}

2. Correct use of layout.tsx: The layout.tsx file should be set up to render the modal. Here's an example from the Next.js documentation (https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#modals):

export default async function Layout(props: {
 // ...
 auth: React.ReactNode
}) {
 return (
 <>
 {/* ... */}
 {props.auth}
 </>
 )
}

3. Correct use of page.tsx: The page.tsx file should be set up to render the modal content. Here's an example from the Next.js documentation (https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#modals):

import { Modal } from 'components/modal'
 
export default function Login() {
 return (
 <Modal>
 <h1>Login</h1>
 {/* ... */}
 </Modal>
 )
}

4. Check your routing: Make sure your routing is set up correctly. If you're getting a 404 error, it might be because Next.js can't find the route you're trying to navigate to. You might want to check the Next.js routing documentation (https://nextjs.org/docs/routing/introduction) for more information.

5. Check for hydration errors: One of the Github issues (https://github.com/vercel/next.js/issues/48509) mentioned a hydration error when adding a default.tsx file. If you're seeing a similar error, it might be worth investigating further.

If you're still having trouble, you might want to check out the Next.js Github issues (https://github.com/vercel/next.js/issues) for similar problems or the Next.js documentation (https://nextjs.org/docs) for more information.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: