React Router DOM v5.2.0点击按钮仅改URL不跳转页面求助

在React项目中使用react-router-dom v5.2.0实现路由功能时，点击结账按钮后URL更新但页面未自动跳转至<Checkout/>组件，必须手动刷新才能显示目标页面。相关代码如下：

App.js 代码 #

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 (
    <Router>
      <div className="App">
        <Switch>
          <Route exact path="/checkout">
            <Header />
            <Checkout />
          </Route>
          <Route path="/">
            <Header />
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>

    // header
    // home
  );
}

export default App;

Header.js 结账按钮相关代码 #

import React from "react";
import "./Header.css";
import { GrSearch } from "react-icons/gr";
import { MdShoppingBasket } from "react-icons/md";
import { Link, useHistory} from "react-router-dom";
import { useStateValue } from "./StateProvider";

const Header = () => {
  const [{ basket }, dispatch] = useStateValue();
  const history = useHistory();

  return (
    <div className="header">
      <Link to="/">
        <img
          className="header__logo"
          src="http://pngimg.com/uploads/amazon/amazon_PNG11.png"
          alt=""
        ></img>
      </Link>
      <div className="header__search">
        <input className="header__searchInput" type="text"></input>
        <GrSearch 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">
            <MdShoppingBasket onClick={ ()=> history.push("/checkout")}/>
            <span className="header__optionLineTwo  header__basketCount">
              {basket?.length}
            </span>
          </div>
        </Link>
      </div>
    </div>
  );
};

export default Header;

原因分析及解决方案 #

1. App.js 语法错误（核心问题） #

App组件的return语句中，<Router>标签后直接添加了两行注释，这会被React解析为多个根元素返回（JSX要求组件必须返回单个根节点）。这个语法错误会导致React渲染异常，直接破坏路由的自动更新机制。

修复方案：
移除return括号内<Router>后的注释，确保return仅返回一个根元素：

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

2. Header中重复触发路由跳转（次要优化） #

你同时使用了<Link to="/checkout">包裹元素，又在<MdShoppingBasket>上绑定了onClick={()=> history.push("/checkout")}，这会导致两次路由跳转触发，虽不直接引发页面不刷新，但属于冗余代码，可能引发潜在问题。

优化方案：
保留其中一种方式即可，推荐使用<Link>组件（符合React Router声明式路由风格）：

<Link to="/checkout">
  <div className="header__optionBasket">
    <MdShoppingBasket />
    <span className="header__optionLineTwo  header__basketCount">
      {basket?.length}
    </span>
  </div>
</Link>

若需要编程式导航，则移除<Link>包裹：

<div className="header__optionBasket" onClick={()=> history.push("/checkout")}>
  <MdShoppingBasket />
  <span className="header__optionLineTwo  header__basketCount">
    {basket?.length}
  </span>
</div>

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