如何使用createBrowserRouter实现带<Link>的JSX模板封装

云原生阿岚

2026-8-16

解决React Router Data Router中带的布局包裹问题

核心问题原因

你提到的data router（如createBrowserRouter）要求所有路由相关组件（包括<Link>）必须处于RouterProvider提供的路由上下文范围内，直接在RouterProvider外部放置<Link>会因缺少上下文而失效。

正确实现方式：将公共布局作为根路由组件

把带<Link>的公共模板（比如header）定义为根路由的组件，通过Outlet渲染子路由内容，这样既可以使用data router的loader等特性，又能让<Link>正常工作。

示例代码：

import { createBrowserRouter, RouterProvider, Outlet, Link } from "react-router-dom";

// 公共布局组件，包含导航Link
const RootLayout = () => {
  return (
    <div className="app-container">
      <header>
        <Link to="/">首页</Link>
        <Link to="/about">关于我们</Link>
      </header>
      {/* Outlet 用于渲染子路由的内容 */}
      <main>
        <Outlet />
      </main>
    </div>
  );
};

// 页面组件示例
const Home = () => <h1>首页内容</h1>;
const About = () => <h1>关于我们</h1>;

// 配置data router
const router = createBrowserRouter([
  {
    path: "/",
    element: <RootLayout />, // 根路由使用公共布局
    children: [
      {
        path: "/",
        element: <Home />,
        loader: async () => {
          // 这里可以正常使用data router的loader特性
          return fetch("/api/home-data").then(res => res.json());
        }
      },
      {
        path: "/about",
        element: <About />,
        loader: async () => {
          return fetch("/api/about-data").then(res => res.json());
        }
      }
    ]
  }
]);

// 渲染应用
ReactDOM.createRoot(document.getElementById("root")).render(
  <RouterProvider router={router} />
);