react-router-dom 5.3.0版本Link组件点击不跳转需手动刷新问题

问题表现 #

使用react-router-dom@5.3.0搭配React 18开发项目时，点击导航栏通过Link组件实现的Home、About导航链接，浏览器地址栏会更新为目标路由路径，但页面不会自动切换渲染对应路由组件，必须手动刷新浏览器才能加载目标页面内容。
现有贴出的代码无路由语法错误：

• Header.js中Link组件的to属性配置符合规范
• App.js中BrowserRouter已包裹导航组件和路由配置区域，Switch、Route的exact属性配置符合5.x版本语法规则

问题根因 #

核心原因是react-router-dom@5.3.0发布时React 18尚未正式上线，该版本没有适配React 18的并发渲染机制，路由上下文的状态变化无法触发订阅组件的重渲染，最终导致URL更新但页面不切换。

解决方案 #

方案1：升级5.x分支到最新兼容版本（推荐，无需修改业务代码） #

5.x分支的后续小版本已经修复了React 18的兼容问题，直接在项目根目录执行命令升级依赖即可：

# npm用户执行
npm install react-router-dom@5.3.4

# yarn用户执行
yarn add react-router-dom@5.3.4

升级完成后重启开发服务，点击Link即可正常跳转切换页面，现有所有路由配置代码不需要做任何改动。

方案2：保留5.3.0版本，调整入口渲染逻辑 #

如果不想升级依赖版本，可以修改项目入口文件src/index.js的React挂载逻辑，降级使用React 17兼容的渲染方式绕开兼容问题：
将原React 18的createRoot挂载写法：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

替换为旧版render写法：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

修改后重启开发服务即可恢复正常跳转。

额外排查项 #

如果操作完上述方案仍有问题，确认导航组件Header必须放在<Router>标签内部，不要挪到Router外层，否则Link组件无法获取路由上下文会导致功能异常，从提供的App.js代码来看，Header组件的放置位置符合要求，不需要调整。

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