如何正确结合RouterProvider使用React-Router-Dom的Link组件？

你的问题出在**RouterProvider组件不支持渲染子元素**——在最新版的react-router-dom（v6及以上）中，RouterProvider仅负责提供路由上下文，它内部的子节点会被直接忽略，所以你写在<RouterProvider>里的<Link>根本不会被渲染到页面上。

修复方案：用嵌套路由+布局组件（推荐） #

这是React Router官方推荐的方式，能让导航在所有页面保持一致，避免重复代码：

1. 创建一个布局组件（比如Layout.jsx），包含导航链接和用于渲染页面内容的<Outlet>：

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

const Layout = () => {
  return (
    <div>
      <Link to="/">Home</Link>
      <span style={{ margin: "0 8px" }}>|</span>
      <Link to="/about">About</Link>
      {/* Outlet会渲染当前匹配的子路由组件 */}
      <div style={{ marginTop: "16px" }}>
        <Outlet />
      </div>
    </div>
  );
};

export default Layout;

2. 修改index.jsx的路由配置，将Home和About作为Layout的子路由：

import React from "react";
import ReactDOM from "react-dom/client";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Layout from "./Layout";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    // 子路由会渲染到Layout的Outlet中
    children: [
      { path: "/", element: <Home /> },
      { path: "/about", element: <About /> }
    ]
  }
]);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

另一种快速修复（不推荐，适合临时测试） #

如果只是想快速看到效果，可以直接把<Link>和页面组件组合成路由的element：

const router = createBrowserRouter([
  {
    path: "/",
    element: (
      <div>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Home />
      </div>
    )
  },
  {
    path: "/about",
    element: (
      <div>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <About />
      </div>
    )
  }
]);

这种方式虽然简单，但会导致导航代码重复，不适合实际项目。

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