next js 中的嵌套路由答案

【问题标题】：Nested routing in next jsnext js 中的嵌套路由
【发布时间】：2020-05-27 17:42:52
【问题描述】：

我查看了 Stackoverflow，似乎普遍的共识正在添加到我的服务器文件中。

虽然我想知道这是否可以通过 NextJS 的动态路由实现。

我正在尝试实现如下所示的路线：

/categories/:id/articles/:id

我试过做这样的事情

- pages
  - categories
    - [id]
      - :id.js
      - articles
        - :id.js

无济于事，所以也许这不是最好的方法。我能在不接触服务器的情况下实现这样的目标吗？

【问题讨论】：

标签： reactjs next.js

【解决方案1】：

是的，它可以做到。你需要像这样在你的 pages 目录中创建一个结构。

- pages
  - categories
    - [categoryId]
      - articles
        - [articleId].js

在[articleId].js 中，您将可以访问params.categoryId 和params.articleId。

如果您想显示/categories/:categoryId/articles 的文章列表页面，您可以通过在articles 文件夹中创建index.js 文件来实现。同样，如果您想显示categories 的列表，您可以在categories 文件夹中创建一个index.js 文件例如，

- pages
  - categories
    - index.js   // to show a list of categories
    - [categoryId]
      - articles
        - index.js // to show list of articles for a specific category
        - [articleId].js

总结

/categories 将在 pages/categories/index.js 中显示 NextPage 组件。
/categories/:categoryId/articles 将在 pages/categories/[categoryId]/articles/index.js 中显示 NextPage 组件
categories/:categoryId/articles/:articlesId 将在 pages/categories/[categoryId]/articles/[articleId].js 中显示 NextPage 组件

【讨论】：

太棒了！因为我的路线采用:id 格式，所以我唯一要做的就是将目录从[id] 更改为:id，它就可以工作了。谢谢！
我很高兴它有帮助。
请问你们使用的是什么版本的 Nexjs？它对我不起作用。我得到一个 404。
@Sofiane 这是核心路由逻辑，据我所知，next 的任何版本都可以使用，除非您使用的是非常旧的版本，该版本在某些时候出现路由问题。请考虑发布一个包含详细信息的问题，以便有人可以帮助您解决您遇到的问题。
@Sofiane 我尝试了所有方法并遇到了同样的问题，但后来我意识到我没有添加 import { useRouter } from 'next/router';在那些新页面中。检查此示例存储库以获取所有文件夹和代码内容：github.com/vercel/next.js/tree/canary/examples/dynamic-routing