Nextjs如何将多个路由映射到一个页面?
Nextjs How to map multiple routes to one page?
我的 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
但它完全是 客户端 并通过重新加载它 returns 404!
在 nextjs 9
中提供了动态路由,这可能对我有帮助,但问题是我只想拥有一个组件和不同的路由。
你有什么想法吗?
您没有指定您的网络服务器,所以我将使用 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.
您可以使用 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
版本 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
但它完全是 客户端 并通过重新加载它 returns 404!
在 nextjs 9
中提供了动态路由,这可能对我有帮助,但问题是我只想拥有一个组件和不同的路由。
你有什么想法吗?
您没有指定您的网络服务器,所以我将使用 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.
您可以使用 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>
);
}