Nextjs 如何将多条路由映射到一个页面?
Posted
技术标签:
【中文标题】Nextjs 如何将多条路由映射到一个页面?【英文标题】:Nextjs How to map multiple routes to one page? 【发布时间】: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/router
asPath
,但它完全是客户端,重新加载它会返回404!
在nextjs 9
中提供了动态路由,这可能对我有所帮助,但问题是我只想拥有一个组件和不同的路由。
你有什么想法吗?
【问题讨论】:
【参考方案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>
);
【讨论】:
以上是关于Nextjs 如何将多条路由映射到一个页面?的主要内容,如果未能解决你的问题,请参考以下文章
Nextjs 动态页面路由:在页面变量中使用扩展运算符 [...example] 或 [[...example]] 的目的是啥?