使用nextjs自定义路由？

reactjs React.js

梅

2020-03-23

我有一个检查路径名并对其进行操作的组件：

  const router = useRouter();
  const path = router.pathname;//props.location.pathname;

  const p = path.split('/').filter((s) => s !== "")
  let submissionId = p[0] == 's' && p[1]
  const submission = useQuery(SUBMISSION, {
    variables: {
      id: submissionId
    },
    skip: submissionId === false
  })

这在沼泽标准react应用程序中可以正常工作，但是nextjs重定向到404。

这是一种为nextjs设置模式以忽略不存在的路由并允许组件代码对其进行处理的方法吗？

第2698篇《使用nextjs自定义路由？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共1个回答

米亚西门 2020.03.23

如果您现在使用zeit v2，则可以在此处签出通配符路由。

基本上，您now.json将拥有一个文件系统处理程序和一个通配符处理程序，如下所示

{
  "routes": [
    { "handle": "filesystem" },
    { "src": "/.*", "status": 404, "dest": "SOME_PAGE_HERE" } // <-- this is where all the non-existent routes will be routing to

  ]
}

只需将SOME_PAGE_HERE路径替换为您exportPathMap从文件中声明的路径即可next.config.js。示例：/contact，about-us依此类推。