React Router Dom中NavLink跳转URL变化但页面不加载

按以下优先级从高到低逐一排查：

• 第一步先打开浏览器开发者工具的Console面板，查看是否有JavaScript报错。你提供的Header代码中ShoppingBasketIcon没有引入声明，basket变量也没有从props/Context中获取的逻辑，这两个变量未定义会直接抛出运行时错误，阻断整个组件树的渲染流程，表现就是URL正常变化但页面内容无更新，补全对应引入、变量取值逻辑即可修复。
• 检查路由根容器配置：确认整个应用已经被BrowserRouter（或HashRouter）包裹，所有路由相关组件（NavLink、Routes、Route）必须在路由容器内部才能共享路由上下文。同时检查是否存在重复嵌套路由容器的问题，多个路由容器实例会导致上下文隔离，导航触发的状态更新无法被路由出口监听到。

正确根组件挂载示例：

import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
)

• 检查路由匹配规则写法，v6版本写法错误是高频问题：
  • v6版本必须用Routes组件包裹所有Route规则，旧版v5的Switch组件已被废弃，直接书写Route不套Routes会导致路由匹配失效
  • v6中Route组件必须用element属性传入渲染的JSX节点，不再支持旧版的component/render属性传参，写法错误会导致路径匹配成功但无内容渲染

v6版本错误写法示例：

// 缺少Routes包裹，使用了废弃的component属性
<Route path="/checkout" component={Checkout} />
<Route path="/" component={Home} />

v6版本正确写法示例：

<Routes>
  <Route path="/checkout" element={<Checkout />} />
  <Route path="/" element={<Home />} />
</Routes>

• 检查组件层级结构：Header组件需要放在路由容器内部、Routes组件外部。如果把Header放到某个Route的渲染节点内部，或者放在Routes组件后方被条件渲染逻辑拦截，会导致导航触发的状态更新无法传递到路由出口。

推荐App组件结构参考：

function App() {
  return (
    <div className="app">
      <Header />
      <Routes>
        <Route path="/checkout" element={<Checkout />} />
        <Route path="/" element={<Home />} />
      </Routes>
    </div>
  )
}

• 排查依赖版本问题：
  • react-router-dom v6要求React版本>=16.8，React版本过低会导致路由内部依赖的hooks（useContext、useSyncExternalStore等）运行异常，出现URL更新但视图不刷新的问题
  • 执行npm ls react-router-dom查看依赖树，如果存在多版本react-router-dom共存的情况，会导致路由上下文不共享，删除node_modules目录和依赖锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml）后重新执行依赖安装命令即可修复
• 排查事件冲突：检查NavLink上是否绑定了自定义onClick事件，如果事件中调用了e.preventDefault()但没有手动编写导航触发逻辑，会阻断默认路由跳转行为，仅触发URL地址变化。同时排查全局路由守卫、自定义history监听逻辑是否错误修改了路由匹配状态，导致路径更新后匹配结果为空。

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