使用 nextjs 自定义路由？

Posted 2023-02-22

【中文标题】使用 nextjs 自定义路由？

【英文标题】：Custom routing with nextjs?

【发布时间】：2019-12-03 19:30:47

【问题描述】：

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

  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
  )

这在沼泽标准反应应用程序中运行良好，但 nextjs 重定向到 404。

是否有一种方法可以为 nextjs 设置模式以忽略不存在的路由并允许组件代码处理它？

【参考方案1】：

我不确定我是否清楚地理解了您想要什么，但是如果您不希望 Next.js 重定向到 404，则需要在 pages 文件夹中定义页面。但是，你可以使用 dynamic routes 来制作你想要的组件。

在 pages 文件夹中创建一个名为 [dynamic].js 的文件：

import React from 'react'
import  useRouter  from 'next/router'

const Dynamic = () => 
  const router = useRouter();
  const  dynamic  = router.query;

  return (
    <div>
      My dynamic page slug: dynamic
    </div>
  )


export default Dynamic

你可以像这样链接到它：

<Link href="/[dynamic]" as="/dynamic-page-slug">
  <a>Link to my Dynamic Page</a>
</Link>

【参考方案2】：

如果您使用的是 zeit now v2，那么您可以在此处查看Wildcard Routes。

基本上在您的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 替换为您在文件next.config.js 中在exportPathMap 中声明的路线即可。 示例：/contact、about-us 等。