reactjs - 使用nextjs自定义路由？

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

  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设置模式以忽略不存在的路由并允许组件代码对其进行处理的方法吗？

最佳答案

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

在页面文件夹中创建一个名为 [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>

关于reactjs - 使用nextjs自定义路由？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57203341/

NextJS

reactjs - 使用nextjs自定义路由？