Can I define routes with variables at different points? /foo/:var/bar/:var2 ?
Unanswered
Brown bear posted this in #help-forum
Brown bearOP
I've been reading over the appDir routing documentation but I can't see anything to help me do this, I'd like to have a route like (variables preceded with
/board/:boardId/route/:routeId
What kind of folder structure could I use to achieve this? There'd be no page at /board/:boardId - only a page at the full URL which would need access to both variables
:
)/board/:boardId/route/:routeId
What kind of folder structure could I use to achieve this? There'd be no page at /board/:boardId - only a page at the full URL which would need access to both variables
1 Reply
Brown bearOP
I answered my own question with Dynamic Routes https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes
This let me define folders with
So I made:
board
| -- [boardId]
| ---- route
| ------ [routeId]
| -------- page.tsx
and that looked like:
This let me define folders with
[]
wrapped around the name to represent the variablesSo I made:
board
| -- [boardId]
| ---- route
| ------ [routeId]
| -------- page.tsx
and that looked like:
type BoardRouteParams = {
boardId: string,
routeId: string
}
export default function BoardRoute({ params }: {params: BoardRouteParams} ) {
return (
<main>
Hi thar! Board = {params.boardId}, Route = {params.routeId}
</Auth>
</main>
)
}