React Router v6 useNavigate替换路径末尾参数时URL更新但页面不跳转

你遇到的是React Router v6的典型场景：同路由组件仅URL参数变化时，组件默认不会重新挂载，仅触发更新。
从/dashboard/clients跳转到/dashboard/clients/foo时，组件首次挂载，内部初始化逻辑正常执行；从foo跳转到bar时，组件实例复用，如果你只在useEffect(()=>{}, [])空依赖中执行页面初始化逻辑，参数变化不会触发逻辑重跑，因此页面内容不变。

方案1：监听路由参数变化（最推荐） #

在组件内部，将路由参数id加入副作用依赖项，id变化时自动重新执行数据拉取、页面初始化逻辑：

import { useParams, useEffect } from 'react-router-dom'

const ClientDetail = () => {
  const { id } = useParams()

  // 将id加入依赖数组，id变化时自动触发逻辑重跑
  useEffect(() => {
    // 替换为你自己的获取客户详情、初始化页面逻辑
    getClientDetail(id).then(res => {
      // 更新页面状态
    })
  }, [id]) 

  // 其余组件逻辑
}

方案2：强制组件重挂载 #

如果不想修改组件内部逻辑，可以在路由配置层给组件绑定和id关联的key，id变化时React会直接销毁旧组件、挂载新组件，自动执行全量初始化逻辑：

import { useLocation, useRoutes } from 'react-router-dom'

function App() {
  const location = useLocation()
  const routes = useRoutes([
    // 其余路由配置
    { 
      path: 'clientdetail/:id', 
      // 用当前路径作为key，路径变化就触发重渲染
      element: <ClientDetail key={location.pathname} /> 
    },
    { 
      path: 'clientdetail/', 
      element: <ClientDetail key={location.pathname} /> 
    },
  ])
  return routes
}

方案3：优化路由配置 #

你当前写了两条clientdetail相关路由，可以合并为可选参数路由，避免路由匹配优先级带来的异常：

// 路径后加?表示id参数为可选，覆盖有id和无id两种场景
{ path: 'clientdetail/:id?', element: <ClientDetail /> },

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