使用React Router Dom的Link组件时应用崩溃，求解决

核心问题 #

你的Sidebar组件位于<RouterProvider>外部，而React Router v6+的<Link>组件必须在路由上下文（由RouterProvider提供）内部才能正常工作，这是导致应用崩溃的直接原因。

修复步骤 #

1. 重构路由配置（Routes.js）

创建一个包含Sidebar、NavBar、Footer的布局组件，使用<Outlet>渲染子页面内容，确保所有需要使用<Link>的组件都处于路由上下文内：

import { createBrowserRouter, Outlet } from "react-router-dom";
import Dashboard from "./Pages/Dashboard/Dashboard";
import Users from "./Pages/Users/Users";
import ProductsList from "./Pages/Products/ProductsList";
import Orders from "./Pages/Orders/Orders";
import Reviews from "./Pages/Reviews/Reviews";
import Sidebar from "./Components/Sidebar/Sidebar";
import NavBar from "./Components/Nav Bar/NavBar";
import FooterCopyRight from "./Components/Footer/FooterCopyRight";

// 全局布局组件
const Layout = () => (
  <div className="lg:grid lg:grid-cols-12 bg-gray-100 min-h-screen">
    <div className="bg-white p-5 col-span-2 hidden lg:flex border-x-2 shadow">
      <Sidebar />
    </div>

    <div className="p-5 col-span-10 bg-gray-100 min-h-screen">
      <NavBar />
      <Outlet /> {/* 用于渲染子路由的页面内容 */}
      <FooterCopyRight />
    </div>
  </div>
);

const router = createBrowserRouter([
  {
    element: <Layout />, // 根路由挂载布局
    children: [
      { path: "/", element: <Dashboard /> },
      { path: "/users", element: <Users /> },
      { path: "/products", element: <ProductsList /> },
      { path: "/orders", element: <Orders /> },
      { path: "/reviews", element: <Reviews /> },
    ],
  },
]);

export default router;

2. 简化App.jsx

让RouterProvider直接包裹整个路由配置，确保路由上下文覆盖所有组件：

import { RouterProvider } from "react-router-dom";
import router from "./Routes";

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

export default App;

3. 确认Sidebar的Link导入

确保Sidebar组件中正确导入React Router的Link：

import { Link } from "react-router-dom";

// 你的Sidebar组件代码
<li className={liStyles}>
  <Link to="/">Dashboard</Link>
</li>

原理说明 #

通过将布局组件整合到路由配置中，所有需要使用<Link>的组件（如Sidebar）都处于RouterProvider提供的路由上下文内部，<Link>能正常获取路由实例，避免崩溃问题，同时也保持了路由配置的独立性。

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