下一个js中的嵌套路由

Question

我环顾了 Stackoverflow，普遍的共识似乎是添加到我的服务器文件中。

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

我正在尝试实现一条看起来像这样的路线：

/categories/:id/articles/:id

我试过做这样的事情

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

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

Answer 1

是的，它可以做到。您需要在您的页面目录中创建这样的结构。

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

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

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

- 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将NextPage在pages/categories/index.js.
• /categories/:categoryId/articles将显示NextPage组件pages/categories/[categoryId]/articles/index.js
• categories/:categoryId/articles/:articlesId将显示NextPage组件pages/categories/[categoryId]/articles/[articleId].js