Question

我遇到了这个问题，每当我尝试直接访问页面localhost:3000/blog/test时，它都会返回404错误。但是，每当我尝试使用<Link>组件访问它时，它都可以正常工作。

这是我的代码<Link href={{ pathname: '/blog', query: {slug: 'test'} }} as="/blog/test"><a className="nav__link">Blog</a></Link>

我的blog.js文件夹中有一个文件pages。

Answer 1

正在发生的事情是，在客户端上，使用Link组件，您通过将blog.js设置为路径名来创建到"/blog"页面的链接。

当您直接转到URL /blog/test时，Next.js将尝试在服务器上呈现页面，并且这样做将查找文件/pages/blog/test.js。该文件不存在，并且Next.js不知道您要加载blog.js页并将query.slug设置为URL的第二部分。

为此，您需要在服务器上映射该路由以加载所需的页面，并将所需的参数从URL中拉出。

Next.js文档在Server Side Support for Clean URLs中通过使用express设置自定义服务器来进行介绍。

您可以查看完整的代码以使其在此处运行，但是您的自定义路线将如下所示：

server.get('/blog/:slug', (req, res) => {
  const actualPage = '/blog'
  const queryParams = { slug: req.params.slug }
  app.render(req, res, actualPage, queryParams)
})

Answer 2

您必须使用now.json来设置路由。同样重要的是要注意，现在是在构建路由，因此如果您使用本地主机，则无法在客户端访问它。现在就构建您的项目，它应该可以正常工作。

“ as”参数也将是as={{ pathname: / user / manage / $ {variable} }}

需要有关nextjs动态网址的帮助

2 个答案: