React Router使用Link跳转URL变化但页面内容不加载需手动刷新

点击React Router的Link组件后地址栏更新但页面停留在首页、手动刷新才能加载对应内容，本质是路由上下文没有正确捕获导航事件、未触发视图重渲染，手动输入URL能正常访问说明服务端的路由回退配置没有问题，不需要改服务端设置。

按优先级从高到低排查即可：

• 检查根组件的Router包裹范围
  这是该问题最高发的诱因：必须将整个应用（包括公共导航栏、路由出口组件）全部包裹在BrowserRouter（或你使用的HashRouter）内部，不能只包裹路由匹配的Switch部分。
  直接去项目入口文件index.js调整渲染逻辑，参考正确写法：

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import { BrowserRouter } from 'react-router-dom';
  import App from './App';
  
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(
    // 整个App包在Router内部，不要把Router写在App.js里只包Switch
    <BrowserRouter>
      <App />
    </BrowserRouter>
  );
  

  如果你之前把Router写在App组件内、只包裹了<Switch>标签，放在外层的<Navbar />就脱离了路由上下文，点击导航栏的Link只会修改浏览器历史栈，不会触发路由匹配更新。

• 检查react-router-dom版本兼容性
  如果你使用React 18及以上版本，必须使用react-router-dom@5.3.4（v5系列最终兼容版本），或升级到v6版本。5.3以下的v5版本不兼容React 18的并发渲染事件机制，会出现导航不触发重渲染的bug。
  执行对应命令调整版本：

  # 保留v5语法，升级到兼容版
  npm install react-router-dom@5.3.4
  
  # 或升级到最新v6版本，注意v6需要把Switch替换为Routes，移除Route上的exact属性，调整路由写法
  

• 补全路由配置
  你当前的路由表只配置了/和/places两个路径，但导航栏里还有指向/culture、/food的Link，这两个路径没有对应匹配的Route规则时，点击后会出现空白页，建议先补全对应路由配置，测试阶段可以先注释这两个链接减少干扰。

• 小问题排查
  如果你启动项目时有编译报错，先检查Places页面对应的import语句，你贴出的代码里这行import的末尾引号存在转义异常，修正引号配对即可正常编译。

修复完成后点击导航栏链接，地址栏更新的同时会自动切换对应页面组件，不需要手动刷新。

内容的提问来源于stack exchange，提问作者Berkay Sönmez