React-router-dom导航异常：URL变更但页面未自动跳转

核心问题：依赖版本冲突 #

你的react-router和react-router-dom版本不匹配，一个是v6.4.2，一个是v5.2.0，版本不一致会导致路由逻辑混乱，这是问题的核心根源。

修复步骤：

• 先卸载现有冲突依赖：

  npm uninstall react-router react-router-dom
  

• 重新安装同版本的路由依赖（推荐选v5或v6其一，这里以匹配你原react-router-dom版本为例）：

  npm install react-router-dom@5.2.0
  

  若要升级到v6，则安装react-router-dom@6.4.2，后续路由代码需对应调整。

导航组件使用错误 #

检查Header组件中购物篮图标的跳转逻辑，如果用了普通的<a href="/checkout">标签，会触发浏览器默认刷新行为，而非React Router的单页导航。必须替换为Link组件：

// 在Header.js中导入Link
import { Link } from "react-router-dom";

// 替换原有<a>标签
<Link to="/checkout">
  {/* 购物篮图标及相关元素 */}
</Link>

Link组件是React Router提供的无刷新导航组件，能正确触发路由页面切换。

若升级到React Router v6的路由代码调整 #

如果选择升级到v6，需修改App.js的路由结构：

• 将Switch替换为Routes
• Route组件通过element属性包裹页面内容

修改后的App.js代码：

import React from "react";
import './App.css';
import Header from './Header';
import Home from "./Home";
import { BrowserRouter as Router, Routes, Route}
from "react-router-dom";
import Checkout from "./Checkout";

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

export default App;

验证操作 #

1. 确保依赖版本完全一致
2. 所有跳转都使用Link组件而非<a>标签
3. 重启开发服务器（修改依赖后必须重启才能生效）

完成以上操作后，点击购物篮图标就能正常导航到checkout页面，无需手动刷新。

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