React路由跳转URL变化但组件未正常切换渲染问题求助

你贴出的App.js路由语法在react-router-dom@5.2.0版本下本身没有错误，出现该问题基本都是以下几个可直接落地排查的原因：

• 重复嵌套路由组件
  检查入口文件src/index.js，如果已经在App组件外包裹了BrowserRouter，App.js内就不需要再套一层<Router>，两层路由上下文冲突会直接导致跳转监听失效，组件不更新。
  正确的入口文件参考（二选一即可，不要重复套Router）：

  // 方案1：Router写在App.js内，index.js不额外套
  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>
  );
  

• 依赖缓存/多版本冲突
  之前升级又回退路由版本很容易残留依赖缓存，直接执行命令彻底重装：

  npm uninstall react-router-dom
  rm -rf node_modules package-lock.json yarn.lock
  npm install react-router-dom@5.2.0
  

• React 18 兼容问题
  react-router-dom 5.x 没有对React 18的并发特性做适配，如果是React 18环境，可以暂时移除index.js里的<React.StrictMode>标签测试，大部分兼容导致的渲染问题都能直接解决。

你可以用下面的精简版代码替换原有App.js做测试，把页面组件抽离后排查问题更方便：

import './App.css';
import React from "react";
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
} from "react-router-dom";

const Home = () => <>This is home page</>
const About = () => <>This is about</>

function App() {
    return (
        <Router>
            <nav>
                <Link to="/">Home</Link> <br />
                <Link to="/about">About</Link>
            </nav>
            <Switch>
                <Route exact path="/" component={Home} />
                <Route exact path="/about" component={About} />
            </Switch>
        </Router>
    );
}
export default App;

补充：如果后续升级到react-router-dom v6稳定版，不需要做上述兼容处理，v6已经用Routes组件替代了原有的Switch，路由写法更简洁，基础写法参考：

// react-router-dom@6.x 写法
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
const Home = () => <>This is home page</>
const About = () => <>This is about</>
function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link><br/>
        <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home/>} />
        <Route path="/about" element={<About/>} />
      </Routes>
    </Router>
  )
}

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