Next.js Discord

Discord Forum

Dynamic Parallel Routes 404 error on Hard Reload/Navigation.

Answered
Boston Terrier posted this in #help-forum
Open in Discord
Boston TerrierOP
So I am trying to create a Dynamic Parallel Route for Support Ticket View, Think the layout like Email Layout where, the list is on the side and the detailed view is on the other side.
I was successfully able to create Dynamic Routes along with the Parallel Routes, it works fine with Next Navigation, but on hard reload on both dev, prod build. It is showing 404 Page.

Folder Structure:

|-support-cases
  |-[ticketType]
    |-@ticket
      |-[ticketId]
        |-page.tsx //Dynamic Ticket detail view page
      |-default.tsx // Exports [Unselected Component]
    |-@ticketList
      |-page.tsx // Left Side List Page with pagination as query params
      |-default.tsx // Need default.{js,ts,jsx,tsx}, Export the above Page.tsx Component
    |-page.tsx // [ticketType] catch-all route, all | customer | vendor | admin
    |-layout.tsx //renders {children} {ticketList} {ticket} with proper layout
  |-page.tsx // Server Side Redirect to [ticketType] //all | customer | vendor | admin


This is my folder structure, everything works as expected on Soft Navigation/ Next Navigation.

Few things to note, layout.tsx don't take { searchParams }, so, we need queryParams for filteration like unread, ongoing, resolved etc, hence page.tsx to set the query params.
Eg:

        <Link
          href={{
            pathname: `/support-cases/${ticketType}`,
            query: {
              ...searchParams,
              ticketStatus: "Ongoing",
            },
          }}
        >
Answered by Boston Terrier
// ./default.tsx
import { default as Page } from "./page";
// Needed to support hard reload on a nested parallel route
export default Page;


default code for dynamic params page should be in this format for it to work,

previously I was exporting a component

import { SomePageComponent } from "./page";
// Needed to support hard reload on a nested parallel route
export default Page(){
return <SomePageComponent />
};


### This did not WORK ❌

Also, I was missing one default.tsx on [ticketType]


### FIX:
Ensuring default.tsx file exists at each level of your parallel routes and that it's properly importing and exporting the corresponding page.tsxfile.



What my folder structure looks now:

|-support-cases
  |-[ticketType]
    |-@ticket
      |-[ticketId]
        |-page.tsx //Dynamic Ticket detail view page
      |-default.tsx // Exports [Unselected Component]
    |-@ticketList
      |-page.tsx // Left Side List Page with pagination as query params
      |-default.tsx // Need default.{js,ts,jsx,tsx}, Export the above Page.tsx Component
    | default.tsx <---------------------- New default added
    |-page.tsx // [ticketType] catch-all route, all | customer | vendor | admin
    |-layout.tsx //renders {children} {ticketList} {ticket} with proper layout
  |-page.tsx // Server Side Redirect to [ticketType] //all | customer | vendor | admin
View full answer

4 Replies

Boston TerrierOP
Boston TerrierOP
// ./default.tsx
import { default as Page } from "./page";
// Needed to support hard reload on a nested parallel route
export default Page;


default code for dynamic params page should be in this format for it to work,

previously I was exporting a component

import { SomePageComponent } from "./page";
// Needed to support hard reload on a nested parallel route
export default Page(){
return <SomePageComponent />
};


### This did not WORK ❌

Also, I was missing one default.tsx on [ticketType]


### FIX:
Ensuring default.tsx file exists at each level of your parallel routes and that it's properly importing and exporting the corresponding page.tsxfile.



What my folder structure looks now:

|-support-cases
  |-[ticketType]
    |-@ticket
      |-[ticketId]
        |-page.tsx //Dynamic Ticket detail view page
      |-default.tsx // Exports [Unselected Component]
    |-@ticketList
      |-page.tsx // Left Side List Page with pagination as query params
      |-default.tsx // Need default.{js,ts,jsx,tsx}, Export the above Page.tsx Component
    | default.tsx <---------------------- New default added
    |-page.tsx // [ticketType] catch-all route, all | customer | vendor | admin
    |-layout.tsx //renders {children} {ticketList} {ticket} with proper layout
  |-page.tsx // Server Side Redirect to [ticketType] //all | customer | vendor | admin
Answer