React Router中点击Link跳转Cart组件时控制台报错求助

兄弟，我瞅了你的代码，问题根源很明确：你的Header组件里的<Link>不在React Router的路由上下文范围内，而且整个App的组件结构也没搭对，导致路由相关组件没法正常工作。

问题分析 #

• 你把<Header>放在了<RouterProvider>的外面，而React Router的<Link>、<Outlet>这类组件必须在<RouterProvider>提供的路由上下文里才能运行，不然会找不到路由相关的上下文对象，直接触发报错。
• 你的<Outlet>也放在了<RouterProvider>外面，这完全不符合路由规则——Outlet是用来渲染子路由内容的，必须由RouterProvider管理，放在外面根本不会生效。
• Redux的<Provider>位置不对，应该包裹整个路由结构，确保所有路由组件都能拿到store的上下文。

解决方案：调整App组件的结构和路由配置 #

把Header、Outlet、Footer都放到根路由的element里，让它们都处于RouterProvider的上下文范围内，同时正确嵌套Redux的Provider。修改后的App.js代码如下：

import React from "react";
import Header from "./Components/Header";
import Body from "./Components/Body";
import Footer from "./Components/Footer";
import { createBrowserRouter, Outlet, RouterProvider } from "react-router-dom";
import RestaurantMenu from "./Components/RestaurantMenu";
import Error from "./Components/Error";
import Cart from "./Components/Cart";
import store from "./Store/store";
import { Provider } from "react-redux";

// 重新配置路由，用根路由包裹共享组件
export const router = createBrowserRouter([
  {
    path: "/",
    // 根路由的element包含Header、Outlet、Footer，并且用Provider包裹
    element: (
      <Provider store={store}>
        <Header />
        <Outlet />
        <Footer />
      </Provider>
    ),
    errorElement: <Error />,
    // 子路由定义各个页面
    children: [
      { path: "/", element: <Body /> },
      { path: "/restaurant/:id", element: <RestaurantMenu /> },
      { path: "/cart", element: <Cart /> },
    ],
  },
]);

function App() {
  return (
    <RouterProvider router={router} fallbackElement={<Error />} />
  );
}

export default App;

为什么这样改就好了？ #

• 现在<Header>在RouterProvider的上下文里了，里面的<Link>就能正常获取路由上下文，点击跳转不会再报错。
• <Outlet>作为根路由的一部分，会根据当前路径自动渲染对应的子路由组件（比如访问/cart时渲染Cart，访问/时渲染Body）。
• Redux的Provider包裹了整个路由结构，所有组件（包括Header、Cart、RestaurantMenu等）都能访问到Redux store了。

其他组件（Header.js、Cart.js这些）不需要修改，保持原样就行，现在点击购物车的Link应该就能正常跳转到Cart页面啦～

备注：内容来源于stack exchange，提问作者DevTestSecOps