Question 317275 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How can I create one page for two dynamic routes?

I use the newest version of nextjs with app router, and I’m a little bit stuck with route organization.

I need routing like that, but can`t figure out how to do it

catalog/[category]/[id] ===> id.jsx
catalog/[category] ===> catalog.jsx
catalog ===> catalog.jsx
Tags:

2

Answers


  1. 0 
    src/ (Folder)
└── catalog/(Folder)
    └── [category]/(Folder) 
        └── [id] / (Folder)
              |_pages.jsx (File)

    This can be accomplished using a combination of file-based routing as you mentioned. You want catalog/[category]/[id] and catalog/[category] to route to different pages, but catalog should route to the same page as catalog/[category].

    You can place a page.jsx file inside of the category folder and style that but when someone reaches your pages.jsx file via routing they will see the category page.jsx as well.

    Login or Signup to reply.
  2. 0

    Have your folder structure like this:

    catalog
  - page.tsx (=> <Catalog/>)
  - [category]
    - page.tsx (=> <Catalog/>)
    - [id]
      - page.tsx
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search