NextJS - 嵌套路由 + 具有上下文和布局的子页面

Question

我目前正在将我的一个 React 应用程序迁移到 NextJS，并且正在努力将我之前的 React-router 架构融入到 nextjs 路由中。

我正在构建的页面看起来像这样：

当用户访问 collection/:collectionId 时，会获取横幅图像以及一些基本详细信息。此数据应该在 3 个子页面中持续存在，并且不应重新获取，因此我需要一个包含三个选项卡的 CollectionContext。

然后，对于每个选项卡，根据用户所在的选项卡，有 3 个单独的数据获取：

• 集合/:集合 ID/项目
• 集合/:collectionid/分析
• 收藏/:collectionid/拍卖

我也希望有 3 个独立的上下文。

我当前的方法是这样的页面结构：

问题在于 items.jsx 似乎不是 [address].jsx 的子级，并且 [address].jsx 不是集合的子级，因此上下文对我不起作用。

此外，我尝试使用嵌套布局来处理侧边栏+横幅图像，但该布局似乎也不是集合的子级，因此它无法访问上下文状态。

Answer 1

您可能已经找到了解决方案，但发布答案可能对其他人有帮助。

以下是我们如何将 React-router 中的路由转换为 Next.js 路由/文件的快速概述。

反应路由器中的路由	Next.js 中的等效文件
collection/:collectionid/analytics	pages/collection/[collectionid]/analytics.jsx
collection/:collectionid/auctions	pages/collection/[collectionid]/auctions.jsx
collection/:collectionid/items	pages/collection/[collectionid]/items.jsx

在每个文件中，您将能够访问作为collectionid参数来获取具有如下data fetching功能的文件：getServerSidePropsgetStaticProps

export async function getServerSideProps(context) {
  const { collectionid } = context.params;

  // fetch data based on `collectionid`
  return {
    props: {}, // will be passed to the page component as props
  }
}

有关动态路由的更多信息：https ://nextjs.org/docs/routing/dynamic-routes

index.js关于不成为 的子级[address].jsx和[address].jsx不成为 的子级的路线collection。

这是一个表格来比较它在react-router中的样子。

截图中的文件	React-Router 中的等效路由
/pages/collection/[address]/analytics.jsx	collection/:address/analytics
/pages/collection/[address]/items.jsx	collection/:address/items
/pages/[address].jsx	/:address
/pages/CollectionContext.jsx	/CollectionContext* （如果它是上下文文件，可能不应该在这里？）
/pages/index.js	/ （回家路线）

*= dir 内的任何文件/pages/都会转换为 Next.js 中的路由/页面。因此，不应从该目录中删除不打算呈现为页面的文件（挂钩、上下文等）。

要解决这个问题：

items.jsx 似乎不是 [address].jsx 的子级，并且 [address].jsx 也不是 collection 的子级

你可以删除[address].jsx和添加/pages/collection/[address]/index.jsxso，它相当于/pages/collection/addressreact-router中的。

为了解决这个问题：

此外，我尝试使用嵌套布局来处理侧边栏+横幅图像，但该布局似乎也不是集合的子级，因此它无法访问上下文状态。

基于此：

当用户访问 collection/:collectionId 时，会获取横幅图像以及一些基本详细信息。此数据应该在 3 个子页面中持续存在，并且不应重新获取，因此我需要一个包含三个选项卡的 CollectionContext。

然后，对于每个选项卡，根据用户所在的选项卡，有 3 个单独的数据获取：

• 集合/:集合 ID/项目
• 集合/:collectionid/分析
• 收藏/:collectionid/拍卖

我也希望有 3 个独立的上下文。

使用这种方法，colleciton/:collectionid如果用户collection/:collectionid/auctions在访问collection/:collectionid. 因此，我建议在_app.jsx文件中获取共享数据并将其存储在上下文中，或者如果您有共享布局，则将其存储在布局文件中，或者使用自定义挂钩，该挂钩仅在上下文中不存在数据时才获取数据。您必须将所有这些导入到页面文件中，并且它们不会成为集合的子项。

布局似乎也不是集合的子级，因此它无法访问上下文状态。

希望有帮助。