React-router-dom@5.2.0导航栏点击URL变页面不切换问题求助

使用react-router-dom@5.2.0开发React应用时，点击Header.js导航栏中的Link组件，浏览器地址栏URL会发生变化，但目标页面不会切换；只有点击浏览器刷新按钮后，页面才会正常显示。

相关代码文件 #

App.js #

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

function App() {
  return (
    <Router>
      <div className="app">
        <Header />
        <Switch>
          <Route path="/checkout" exact>
            <Checkout />
          </Route>
          <Route path="/" exact>
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;

Header.js #

import React from 'react'
import './Header.css'
import SearchIcon from '@mui/icons-material/Search';
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
import { Link } from "react-router-dom";
import { useStateValue } from "./StateProvider";

function Header() {
  const [{ basket }, dispatch] = useStateValue();

  return (
    <div className='header'>
      <Link to="/">
        <img className='header_logo' src="http://pngimg.com/uploads/amazon/amazon_PNG11.png" alt="" />
      </Link>

      <div className="header_search">
        <input type="text" className='header_searchInput' />
        <SearchIcon className='header_searchIcon' />
      </div>
      <div className="header_nav">
        <div className="header_option">
          <span className='header_optionLineOne'>Hello Guest</span>
          <span className='header_optionLineTwo'>Sign In</span>
        </div>
        <div className="header_option">
          <span className='header_optionLineOne'>Returns</span>
          <span className='header_optionLineTwo'>& Orders</span>
        </div>
        <div className="header_option">
          <span className='header_optionLineOne'>Your</span>
          <span className='header_optionLineTwo'>Prime</span>
        </div>
        <Link to="/checkout">
          <div className="header_optionBasket">
            <ShoppingCartIcon />
            <span className="header_optionLineTwo header_basketCount">{basket?.length}</span>
          </div>
        </Link>
      </div>
    </div>
  )
}

export default Header

问题排查与解决方案 #

可能原因及对应解决步骤 #

1. 全局状态管理导致组件不更新
   Header组件依赖useStateValue获取basket状态，如果StateProvider的上下文更新逻辑存在问题（比如未正确触发重渲染），会导致路由变化后组件无法同步更新。

   • 临时注释Header中与basket相关的代码（如{basket?.length}），测试路由是否正常切换。若恢复正常，需检查StateProvider实现，确保dispatch能正确触发上下文更新，避免React.memo等优化手段阻断路由相关的组件重渲染。

2. 多Router实例冲突
   确保整个应用仅存在一个BrowserRouter实例（即App.js中包裹的那个），若其他组件嵌套了Router，会引发路由上下文冲突，导致URL变化但页面不切换。

3. 版本兼容性问题
   确认React版本与react-router-dom@5.2.0兼容，v5版本要求React >=16.8.0（支持Hooks），版本过低可能引发异常。

4. 缓存或浏览器环境问题
   清除浏览器缓存，切换到无痕模式测试，排除缓存导致的路由逻辑异常。

5. Switch组件匹配规则验证
   当前代码中Switch的路由顺序正确（更具体的/checkout路由放在/前面），可尝试移除exact属性测试（注意移除/路由的exact会匹配所有路径，需调整顺序），确认是否因路由匹配规则导致问题。

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