React Router路由匹配失败，无法导航至Cart页面求助

我在使用React Router时遇到了“No Router matched”错误，无法导航至Cart页面。尝试过使用useNavigate钩子和NavLink组件两种方式，将路径替换为/login时可正常跳转，已清理缓存、硬刷新并重启服务器，但问题依旧。

相关代码 #

App.js #

import Login from './Auth/components/login/Login';
import { Route, BrowserRouter, Routes, Outlet } from 'react-router-dom';
import SignIn from './Auth/components/signin/Signin';
import Home from './Home/Home';
import Dogs from './pets/Dogs';
import Cats from './pets/Cats';
import Others from './pets/Others';
import Pets from './pets/Pets';
import { Header } from './ui/Header/Header';
import { ContextClickValue } from './context/ContextClick';
import Cart from './Auth/components/cart/Cart';


function App() {
  return (
    <>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />} >
          </Route>
        </Routes>
        <Header />
        <Routes>
          <Route path="/login" element={<Login />}></Route>
          <Route path="/signin" element={<SignIn />}></Route>
          <Route path="/cart" element={<Cart />}></Route>
          <Route path="pets" element={< Outlet />}>
            <Route index element={<Pets />} />
            <Route path="dogs" element={<Dogs />} />
            <Route path="cats" element={<Cats />} />
            <Route path="others" element={<Others />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </>
  );
}

export default App;

Header.js #

import { menuItems } from "../../Home/MenuItems";
import MenuItemComponent from "./MenuItemComponent";
import HeaderStyles from "./Header.module.css";
import { ContextClick, ContextClickValue } from "../../context/ContextClick";
import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart';
import  {useSelector} from 'react-redux'
import { NavLink, useNavigate } from "react-router-dom";


export function Header() {
    const cart = useSelector(state => state.cart.cart)
    const  navigate = useNavigate()

    function navigateToCart(e){
         e.preventDefault()
        navigate('/cart')
    }
    let  total = 0;
    return (
        <section className={HeaderStyles.navbar}>
            <header>
                <h4 className={HeaderStyles.logo}>PETSHOP</h4>
                <nav>
                        <MenuItemComponent items={menuItems} />
                </nav>
            </header>
            <section style={{ float:'right',margin:30, color:'white'}}>
            <AddShoppingCartIcon  style={{cursor:'pointer'}} onClick={navigateToCart}/>
            {cart.forEach(item => {
                total += item.quantity
            })}
            <span>{total}</span>
            </section>
        </section>
    )
}

尝试过的NavLink写法 #

<NavLink to="/cart">
    <AddShoppingCartIcon style={{cursor:'pointer'}} />
    {cart.forEach(item => {
        total += item.quantity
    })}
</NavLink>  

问题现象 #

• 尝试导航至Cart页面失败
• 开发者工具显示无匹配路由，已清理缓存、硬刷新并重启服务器
• 替换为/login路径可正常导航

问题原因及解决方法 #

问题出在使用了多个<Routes>组件。React Router v6中，<Routes>组件会独立执行路由匹配逻辑，仅渲染自身内部第一个匹配的路由。当导航到/cart时，第一个<Routes>只有/路径，无法匹配/cart，而第二个<Routes>的匹配结果不会生效，最终导致无匹配路由的错误。

解决方法是将所有路由合并到同一个<Routes>组件中，通过嵌套路由组织结构，让所有路由共享Header：

修改后的App.js代码：

import Login from './Auth/components/login/Login';
import { Route, BrowserRouter, Routes, Outlet } from 'react-router-dom';
import SignIn from './Auth/components/signin/Signin';
import Home from './Home/Home';
import Dogs from './pets/Dogs';
import Cats from './pets/Cats';
import Others from './pets/Others';
import Pets from './pets/Pets';
import { Header } from './ui/Header/Header';
import { ContextClickValue } from './context/ContextClick';
import Cart from './Auth/components/cart/Cart';


function App() {
  // 创建共享布局，包含Header和子路由出口
  const Layout = () => (
    <>
      <Header />
      <Outlet />
    </>
  );

  return (
    <BrowserRouter>
      <Routes>
        {/* 根路由使用共享布局，所有子路由自动继承Header */}
        <Route element={<Layout />}>
          <Route path="/" element={<Home />} />
          <Route path="/login" element={<Login />} />
          <Route path="/signin" element={<SignIn />} />
          <Route path="/cart" element={<Cart />} />
          <Route path="pets" element={<Outlet />}>
            <Route index element={<Pets />} />
            <Route path="dogs" element={<Dogs />} />
            <Route path="cats" element={<Cats />} />
            <Route path="others" element={<Others />} />
          </Route>
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

修改后，所有路由在同一个<Routes>中匹配，导航到/cart时就能正确找到对应路由并渲染Cart组件。

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