React与react-router-dom中Link组件跳转功能异常求助

我跟着YouTube教程制作亚马逊克隆项目，前90分钟推进都正常。由于新版react-router-dom不再支持Switch组件，我将其降级至5.2.0版本后恢复正常。但后续编写Header组件时，使用react-router-dom的Link组件实现logo和购物车跳转，点击后URL虽变为目标地址，但页面未自动跳转，需手动在地址栏回车才能切换页面。我的代码与教程完全一致，相关代码如下：

Header组件代码 #

import React from 'react';
import './Header.css';
import SearchIcon from '@mui/icons-material/Search';
import ShoppingBasketIcon from '@mui/icons-material/ShoppingBasket';
import { Link } from 'react-router-dom';

function Header() {
  return (
    <div className='header'>
      <Link to='/'>
        <img className='header__logo' src="http://pngimg.com/uploads/amazon/amazon_PNG11.png"/>
      </Link>
      
      <div className='header__search'>
        <input className='header__searchInput' type='text' />
        <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'>
            <ShoppingBasketIcon />
            <span className="header__optionBasket header__basketCount">0</span>
          </div>
        </Link>
        
      </div>
    </div>
  )
}

export default Header

路由代码 #

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

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

export default App;

我是React新手，已确保代码与教程一致，但问题仍未解决，希望得到帮助。

解决方法 #

• 给根路由添加exact属性：在react-router-dom v5中，根路径/需要加exact才能精确匹配，否则所有包含/的路径都会匹配到Home组件，导致跳转后页面不更新。修改路由代码中的根路由：

  <Route exact path="/">
    <Home />
  </Route>
  

• 确认react-router-dom版本正确性：检查package.json中react-router-dom的版本是否为5.2.0，若版本不符，执行npm install react-router-dom@5.2.0重新安装。
• 检查React版本兼容性：react-router-dom v5.2.0对React 18的支持有限，若你使用的是React 18，建议升级到react-router-dom v6（需替换Switch为Routes，调整Route写法），或降级React到17.x版本。
• 清除浏览器缓存/使用无痕模式测试：浏览器缓存可能导致路由逻辑异常，清除缓存后再测试跳转功能。
• 避免嵌套Router：确保整个应用只有一个Router包裹，不要在Header或其他组件中重复嵌套Router。

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