React路由问题：Error组件随所有路由组件一同渲染

你的问题出在使用了多个独立的<Routes>组件——每个<Routes>都会单独执行路由匹配逻辑，哪怕当前URL已经匹配了前面的合法路由，最后那个包含path="*"的<Routes>依然会匹配到Error组件并渲染，所以所有页面下方都会出现Error。

修复方案：合并所有路由到同一个<Routes>组件中 #

React Router v6的<Routes>组件会自动只渲染第一个匹配成功的路由，把所有路由规则放在同一个<Routes>里，就能保证只有当没有任何合法路由匹配时，才会渲染Error页面。

修改后的完整代码：

import React from "react";
import {
  BrowserRouter as Router,
  Routes,
  Route,
} from "react-router-dom";
import { Navbar, Sidebar, Footer } from "./components";
import {
  Home,
  SingleProduct,
  Cart,
  Checkout,
  Error,
  About,
  Products,
  PrivateRoute,
} from "./pages";

function App() {
  return (
    <Router>
      <Navbar />
      <Sidebar />
      {/* 所有路由都放在同一个Routes组件内 */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/cart" element={<Cart />} />
        {/* 嵌套路由写法保持不变 */}
        <Route path="products">
          <Route index element={<Products />} />
          <Route path=":productId" element={<SingleProduct />} />
        </Route>
        <Route path="/checkout" element={<Checkout />} />
        {/* 把Error路由放在最后，作为兜底 */}
        <Route path="*" element={<Error />} />
      </Routes>
      <Footer />
    </Router>
  );
}

export default App;

额外说明 #

• React Router v6中已经废弃了exact属性，默认的路由匹配逻辑已经是精确匹配（嵌套路由除外），所以可以直接删掉所有exact。
• 兜底的path="*"路由必须放在所有合法路由的最后，这样才会在没有匹配项时触发。

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