React可复用组件配合Next.js浅路由更新URL后刷新出现404如何解决

问题根因 #

通过浅路由在前端修改页面URL为/projects/${pid}后，项目pages目录下没有对应/projects/[pid].js的动态路由文件，浏览器刷新时会直接向服务端请求该路径，Next.js匹配不到对应页面资源就会返回404。

解决方案（推荐使用可选动态路由） #

1. 重命名页面文件 #

将原/pages/projects/index.js重命名为/pages/projects/[[...pid]].js。
双中括号包裹的可选动态路由片段可同时匹配/projects、/projects/xxx两类路径，刷新时不会出现404报错。

2. 新增路由参数读取逻辑 #

在组件中添加useEffect监听路由参数，页面初始化时自动读取URL中的项目ID设置为选中项：

useEffect(() => {
  // 等待路由初始化完成
  if (!router.isReady) return
  const { pid } = router.query
  if (pid?.length) {
    // 可选动态路由参数为数组格式，取第一位即为项目ID
    setProjectSelectedId(pid[0])
  }
}, [router.isReady, router.query])

替代方案：配置路由重写（不推荐） #

如果不想修改原文件名称，可在next.config.js中添加重写规则，将所有/projects/开头的路径请求指向项目列表页：

// next.config.js
module.exports = {
  async rewrites() {
    return [
      {
        source: '/projects/:pid',
        destination: '/projects',
      },
    ]
  },
}

修改配置后需要重启项目生效。

内容的提问来源于stack exchange，提问作者hellomello