Nextjs 如何将多条路由映射到一个页面？答案

【问题标题】：Nextjs How to map multiple routes to one page?Nextjs 如何将多条路由映射到一个页面？
【发布时间】：2019-12-25 14:29:18
【问题描述】：

我的nextjs 版本 9 中有一个名为 blog 的页面。

Next 为我的页面创建路由 /blog。现在我想让这些路由映射到同一个博客页面，从而映射到博客组件：

1. /blog/cat1/gold
2. /blog/cat2/silver
3. /blog/cat3/bronze

实际上，我想在路由中将它们用作query parameters，但我不想遵循这种格式：

1. /blog?cat=cat1&color=gold
2. /blog?cat=cat2&color=silver
3. /blog?cat=cat3&color=bronze

我使用了next/routerasPath，但它完全是客户端，重新加载它会返回404！

在nextjs 9 中提供了动态路由，这可能对我有所帮助，但问题是我只想拥有一个组件和不同的路由。

你有什么想法吗？

【问题讨论】：

标签： reactjs routing react-router next.js query-parameters

【解决方案1】：

你没有指定你的网络服务器，所以我将使用 expressjs 举例说明。

const app = next({ dev })

app.prepare().then(() => {
   const server = express();
   server.get("/blog/:cat/:color", (req, res) => app.render(req, res, `/blog`));
})

如果需要访问页面中的值，可以使用getInitialProps通过访问req.params.cat和req.params.color获取值。

另一种方式是在调用app.render函数时直接传值：

app.render(req, res, '/posts', { cat: req.params.cat, color: req.params.color })

这里是example。

【讨论】：

我的网络服务器是 express 的。让我试试这个然后让你知道。谢谢
在客户端的外观如何？我的意思是 "href" 和 "as" 的值是什么？如果我有另一条路线“/blog/cat1”会获得更多优先级怎么办？
在快速网络服务器中，它们不会提供“/blog/cat1”，除非您为此定义另一个 API。所以那里没有优先级，因为监听器是完全不同的功能。 "/blog/:cat/:color" 只会监听任何具有 3 个参数的浏览器请求：blog、cat 和 color。对于 href 和 as value，您可以从这里查看 github.com/zeit/next.js#with-link

【解决方案2】：

您可以使用Next's dynamic routers 执行此操作。只需为博客文章创建一个文件夹并在其下添加一个动态页面，如下所示：

  /pages/blog/[...slug].tsx

现在您的[...slug].tsx 将捕获所有路径，无论深度如何。您可以从路由器的查询字段中捕获路径参数。尝试使用 /blog/**/* -path 下的任何路径，它会列出路径元素：

const Blog = () => {

  const { 
    query: { slug } 
  } = useRouter(); 

  return (
    <ul>
      {query.slug.map(value => <li key={value}>{value}</li>)}
    </ul>
  );
}

【讨论】：