React Router v6 createBrowserRouter使用报错及架构调整问题

1. 立即解决TS2322报错 #

RouterProvider组件不接受children属性，你不需要在它内部嵌套<App />。正确的做法是把App（或其他页面组件）定义在createBrowserRouter的路由配置里，而非作为RouterProvider的子元素。

错误写法示例：

// 错误：RouterProvider不支持children属性
<RouterProvider router={router}>
  <App />
</RouterProvider>

正确写法：

// index.tsx
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import App from "./App";
import GeneDetail from "./GeneDetail"; // 自定义的基因详情组件

// 定义路由配置数组
const router = createBrowserRouter([
  {
    path: "/",
    element: <App />, // 将App作为根路由的渲染组件
    children: [
      // 定义嵌套路由，处理基因ID参数
      {
        path: "gene/:geneID",
        element: <GeneDetail />,
        // 渲染前预加载数据的loader函数
        loader: async ({ params }) => {
          const response = await fetch(`/api/gene/${params.geneID}`);
          return response.json();
        },
      },
    ],
  },
]);

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <RouterProvider router={router} /> {/* 无需传入children */}
  </React.StrictMode>
);

2. 实现URL传geneID与预加载数据 #

路由参数配置 #

在路由路径中用:geneID声明动态参数，URL中对应位置的内容会被自动解析为params.geneID。

编写Loader函数 #

给目标路由添加loader属性，函数会在组件渲染前执行，通过params获取URL中的geneID，发起请求获取数据并返回。

在组件中获取加载的数据 #

在GeneDetail组件中，用useLoaderData()钩子获取loader返回的数据，用useParams()直接读取URL参数：

// GeneDetail.tsx
import { useLoaderData, useParams } from "react-router-dom";

// 自定义类型适配你的接口返回数据
type GeneData = {
  id: string;
  name: string;
  description: string;
};

export default function GeneDetail() {
  const geneData = useLoaderData() as GeneData;
  const { geneID } = useParams<{ geneID: string }>();

  return (
    <div className="gene-detail">
      <h2>基因ID：{geneID}</h2>
      <p>名称：{geneData.name}</p>
      <p>描述：{geneData.description}</p>
    </div>
  );
}

3. 架构调整要点 #

• 所有页面、布局组件都通过createBrowserRouter的路由配置注册，不在RouterProvider内直接嵌套。
• 如果App作为通用布局（比如包含导航栏），需要在App中添加<Outlet />标签，用来渲染子路由的内容：

// App.tsx
import { Outlet, Link } from "react-router-dom";

export default function App() {
  return (
    <div className="app-layout">
      <nav>
        <Link to="/">首页</Link>
        <Link to="/gene/BRCA1">BRCA1基因</Link>
      </nav>
      <Outlet /> {/* 子路由组件会渲染到这里 */}
    </div>
  );
}

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