时间戳

首页 > 解决方案 > Nextjs 如何将多条路由映射到一个页面？

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

问题描述

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

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/router asPath，但它完全是客户端，通过重新加载它返回404！

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

你有什么想法？

标签： reactjsroutingreact-routernext.jsquery-parameters

解决方案

您没有指定您的 Web 服务器，所以我将使用 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.catreq.params.color

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

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

这是示例。

推荐阅读