reactjs - Nextjs如何将多条路线映射到一页？

我的nextjs版本9中有一个名为博客的页面。
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中提供了动态路由，这可能对我有所帮助，但问题是我只想拥有一个组件和不同的路由。

你有什么想法？

最佳答案

您没有指定您的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.cat来使用req.params.color来获取值。

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

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

这是example。

关于reactjs - Nextjs如何将多条路线映射到一页？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57572500/