Question

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

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

您没有指定您的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

这里是example。

Answer 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如何将多个路由映射到一页？

2 个答案: