Next.js Discord

Discord Forum

Dynamic routing

Unanswered
Rough harvester ant posted this in #help-forum
Open in Discord
Rough harvester antOP
I'm using nextjs app router. I have routes /learn and /learn/[threadID] where if the threadID is provided it'll open the chat modal on screen. The issue is I have a duplicate page.tsx in both learn/ and threadID/.
.
└── learn/
    ├── threadID/
    │   └── page.tsx <- duplicate content
    ├── page.tsx
    └── layout.tsx

So far, I've thought of putting all page content except the chat modal in layout.tsx, and the closed modal in page.tsx in /learn and the open modal in page.tsx in learn/[threadID]/. This just seems a bit odd though. Any ideas please?

4 Replies

ReverseGem7
// learn/[[...threadID]]/page.tsx
import YourModalComponent from "./YourModalComponent";

export default function Page({ params }: { params: { threadID?: string[] } }) {
  if (params.threadID) {
    return <YourModalComponent />;
  } else return <h1>Your Page</h1>;
}
└── learn/
    └── [[...threadID]]/
        └── page.tsx
Rough harvester antOP
Tysmmmmm!’nn