Next.js 在屏幕之间导航时维护路由

Posted 2023-02-21

【中文标题】Next.js 在屏幕之间导航时维护路由

【英文标题】：Next.js maintain route when navigating between screens

【发布时间】：2022-01-21 11:36:05

【问题描述】：

我在 Next.js 中有以下问题。我正在构建一个仪表板。 这在某种程度上是根本路线：

/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% 才能导航到产品，否则我会失去商店的参考资料。我知道我可以从路由中检索STORE_ID%，而不仅仅是再次传递它，但这是多余的，并且有很多 NextLinks 需要做很多工作。有什么方法可以告诉下一个：使用我知道的路线，只需将 /product/%PRODUCT_ID% 添加到它

【问题讨论】：

您可以使用window.location.href获取当前路线。

这能回答你的问题吗？ Relative Routing in Next JS

【参考方案1】：

这在 Next.js 中称为动态路由，您需要查看 this example 以了解如何完成此操作。

The Next.js example repo 提供大量常见 HOW-TO 示例

【讨论】：

好的，基本上我只是想通了没有真正的捷径，例如tipp的ty