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

Question

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

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

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动态路由中提供了这可能对我有帮助，但问题是我只想拥有一个组件和不同的路由。

你有什么想法？

Answer 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 })

这是示例。