Next.js maintain route when navigating between screens-CodePudding

I have the following problem in Next.js. Im building a Dashboard. This would be somewhat the root route:

/dashboard/

Here you can select from different Stores to get to the Dashboard of the different stores. Now when I click on one of the stores, this is my route:

/dashboard/store/%STORE_ID%/

%STORE_ID% is something like 3iHnkdnfkD and I need it to communicate with my backend. Basically I use the ID as one of the keys to my database and wont to get it from the route when clicking on a page. Now, the route goes on... Lets say I have different products and each of them has an ID again:

/dashboard/store/%STORE_ID%/product/%PRODUCT_ID%

When navigating between these individual products, the %PRODUCT_ID% changes obviously and with it the route. So, I have this route: /dashboard/store/3iHnkdnfkD as example; The page would now consist of a table where I can click on the products to get a detailed page. So I would use a NextLink and when I click on one of the products get its id to onclude in the route:

<NextLink href={`/dashboard/store/%STORE_ID%/product/${id}`}>
  <MyUnrelevantButton />
</NextLink>

Now, heres my problem: I need to know the STORE_ID% to navigate to the product, since otherwise, I would lose ref of the store. I know I would be able to retrieve the STORE_ID% from the route and than just pass it in again, but this is redundant and with more than a few NextLinks quite a lot of work. Is there any way to tell Next: Use the route I have right know and just add /product/%PRODUCT_ID% to it

CodePudding user response：

This is called dynamic routing in Next.js You will want to checkout this example on how to accomplish this.

The Next.js example repo as a ton of examples for common HOW-TO