点击React Router Dom的Link后URL变化但组件未渲染问题

问题表现 #

React项目集成React Router Dom时，点击Link组件触发路由跳转后，浏览器地址栏URL已变更为目标路径，但对应路由匹配的页面组件未正常渲染，页面停留在跳转前的内容。

复现截图 #

• 跳转前（登录页，路径为/login）：
  
• 点击Link跳转后（URL变为根路径/，但页面仍停留在登录页）：
  

问题相关代码 #

App.js 路由配置 #

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Login from "./components/login/Login";
import Register from "./components/register/Register";
import Home from "./pages/home/Home";
import Profile from "./pages/profile/Profile";

function App() {
  return (
    <Router>
      //using router
      <Switch>
        <Route exact path="/">
          //path to home page
          <Home />
        </Route>
        <Route exact path="/profile/:username">
          //path to profile
          <Profile />
        </Route>
        <Route exact path="/login">
          // path to login
          <Login />
        </Route>
        <Route exact path="/register">
          //path to register
          <Register />
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

Login.js 登录组件 #

import { Link } from "react-router-dom";
import "./login.css";

export default function Login() {
  return (
    <div className="login">
      <div className="loginWrapper">
        <div className="loginLeft">
          <Link to="/" style={{ textDecoration: "none" }}>
            <span className="loginLogo">Social Media</span>
          </Link>

          <div className="loginText">
            Connect with friends and the world around you on Social Media
          </div>
        </div>
        <div className="loginRight">
          <input placeholder="Email" type="email" className="loginEmail" />
          <input
            placeholder="Password"
            type="password"
            className="loginPassword"
          />
          <div className="loginButtonDiv">
            <button className="loginButton">Log In</button>
          </div>
          <div className="loginPasswordReset">Forgot Password?</div>
          <button className="createNew">Create a New Account</button>
        </div>
      </div>
    </div>
  );
}

修复方案 #

按优先级排查以下常见诱因，对应修复即可：

1. 修正JSX注释写法
   当前代码直接在JSX结构中使用// 注释的写法是错误的，这类注释会被解析为普通文本节点，可能干扰Switch组件的路由匹配逻辑。JSX注释必须使用{/* 注释内容 */}的格式。
   修正后的路由配置代码：

   import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
   import Login from "./components/login/Login";
   import Register from "./components/register/Register";
   import Home from "./pages/home/Home";
   import Profile from "./pages/profile/Profile";
   
   function App() {
     return (
       <Router>
         {/* 路由容器 */}
         <Switch>
           <Route exact path="/">
             {/* 首页 */}
             <Home />
           </Route>
           <Route exact path="/profile/:username">
             {/* 个人主页 */}
             <Profile />
           </Route>
           <Route exact path="/login">
             {/* 登录页 */}
             <Login />
           </Route>
           <Route exact path="/register">
             {/* 注册页 */}
             <Register />
           </Route>
         </Switch>
       </Router>
     );
   }
   
   export default App;
   

2. 修复版本兼容问题
   如果项目使用React 18及以上版本，必须搭配react-router-dom@5.3.0及以上的v5版本，低版本v5的路由上下文订阅逻辑不兼容React 18的并发渲染机制，会直接导致URL更新后组件不触发重渲染。
   执行命令升级到兼容的v5稳定版：

   npm install react-router-dom@5.3.4
   

   如果选择升级到v6版本，需要同步调整路由写法：v6中Switch组件被替换为Routes，页面组件通过element属性传入，示例：

   import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
   // 组件import省略
   function App() {
     return (
       <Router>
         <Routes>
           <Route exact path="/" element={<Home />} />
           <Route exact path="/profile/:username" element={<Profile />} />
           <Route exact path="/login" element={<Login />} />
           <Route exact path="/register" element={<Register />} />
         </Routes>
       </Router>
     );
   }
   

3. 排查入口文件配置错误
   检查src/index.js入口文件，避免重复嵌套BrowserRouter：Router组件只需要在App根组件包裹一次即可，重复嵌套会导致路由上下文实例不统一，触发更新异常。
   React 18标准入口写法参考：

   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>
   );
   

4. 补全开发服务路由配置
   如果是手动搭建的React项目（非create-react-app脚手架生成），需要在webpack/vite配置中开启history模式路由回退规则，将所有路由请求重定向到index.html，否则会出现路由跳转异常。create-react-app已默认配置该规则，无需额外修改。

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