在Next.js中模仿react-router-dom嵌套路由

Question

我正在尝试模仿react-router的this example。我研究了GH上的一些问题，似乎不太可能。但是，与此同时，这不是Web应用程序中的基本/常见功能吗？我是否缺少明显的东西？

我当前的结构是：

/pages
  /session
    [sid].js
    /topics
      [tid].js

会话页面上有我要更新的主题列表，[[sid].js页面上。但是，我尝试的所有内容都只是导航到[tid].js。我尝试将<Link>与replace一起使用，但这不能满足我的要求，因为我仍然希望历史记录中存在该项目。我尝试过router.push，但我在同一条船上，并且真的想使用<a>元素。

Answer 1

nextjs路由器将路由映射到您的页面。

以您定义页面目录和文件的方式，导航到：

/session/1 will be rendering [sid].js with sid = 1
/topics/14 will be rendering [tid].js with tid = 14

如果SessionPage是您在[sid] .js页面中呈现的组件，则使用getIntiailProps读取sid值：
SessionPage.getInitialProps = (ctx) => {
  const sid = ctx.query.sid;
}

请参阅文档：https://nextjs.org/docs/api-reference/next/router