Getting 404 Page Not Found on refresh, when using parallel routes

Question

I am creating this webapp dashboard in Next js 13 latest version with app router. it have dashboard and search bar on top. I tried to use parallel routes. @search folder search bar and page.jsx contains dashboard. When ever i am using link from side bar it is working properly but if refresh the page it shows 404 Not Found.

@search folder contains searchbar

when using with sidebar links it working properly

but if i am refreshing the page i am getting 404.

Everything is working flawlessly in component system.

can any help me with this parallel routes.

I am trying to put search bar and dashboard in same page by using parallel routes introduced by nextjs 13. but it is working as expected but not on refresing the page.

I tried component way it is working but i want to use parallel routes for sharing data between server components.

Answer 1

Try to move all the content inside @search/page.tsx to default.tsx, and remove the page.tsx.

---

before

@search
- page.tsx

other answers may be suggesting

@search
- page.tsx
- default.tsx

where default.tsx could be as simple as

export default function Default() {
  return null;
}

that could probably fix the 404, however, other grouped pages may won't find @search/pages.tsx well. If you don't really need the segmentation, actually you can use default.tsx without page.tsx as below.

after

@search
- default.tsx

worked for me for both the root route and other sub-grouped routes.