Next.js在屏幕之间导航时保持路线

Question

我在Next.js中遇到以下问题。我正在构建一个Dashboard。这在某种程度上是根路径：

/dashboard/

在这里，您可以从不同的商店中进行选择，以进入不同商店的仪表板。现在，当我点击其中一家商店时，这是我的路线：

/dashboard/store/%STORE_ID%/

%STORE_ID%类似于3iHnkdnfkD，我需要它来与我的后端通信。基本上，我使用ID作为数据库的密钥之一，并且习惯于在点击页面时从路由中获取它。现在，路线还在继续…假设我有不同的产品，每个产品都有一个ID：

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

在这些单独的产品之间导航时，%PRODUCT_ID%会发生明显变化，路线也会随之变化。因此，我有这样的路线：以/dashboard/store/3iHnkdnfkD为例；该页面现在将由一个表格组成，我可以在其中单击产品以获得详细页面。所以我会使用NextLink，当我点击其中一个产品时，它的id会被包含在路线中：

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

现在，我的问题是：我需要知道STORE_ID%才能导航到产品，否则，我将丢失商店的ref。我知道我可以从路由中检索STORE_ID%，而不仅仅是再次传递它，但这是多余的，而且需要多个NextLinks来完成相当多的工作。有什么方法可以告诉下一步：使用我知道的路线，只需将/product/%product_ID%添加到其中

Answer 1

这在Next.js中被称为动态路由。您将需要查看如何实现这一点的示例。

Next.js示例回购作为常见HOW-TO 的大量示例