React Router v6中如何为RouteObject添加自定义参数？

1. 扩展RouteObject类型 #

React Router的RouteObject类型默认不包含自定义属性，我们可以通过TypeScript的模块扩展来添加你需要的permission字段。在项目中创建一个.d.ts声明文件（比如react-router.d.ts），或者在组件文件顶部添加以下类型扩展代码：

import 'react-router-dom';

declare module 'react-router-dom' {
  interface RouteObject {
    permission?: string[]; // 自定义权限参数，设为可选类型适配无需权限的路由
  }
}

2. 编写合法的路由定义 #

完成类型扩展后，你就可以正常在路由对象中添加permission参数，TypeScript不会再抛出类型不匹配的错误：

import { FunctionComponent } from 'react';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Dashboard from './Dashboard';

const AdminRoutes: FunctionComponent = () => {
  const router = createBrowserRouter([
    {
      path: '/',
      element: <Dashboard />,
      permission: ['edit'], // 自定义参数现在符合类型要求
    },
  ]);

  return <RouterProvider router={router} />;
};

export default AdminRoutes;

3. 在组件中获取自定义参数 #

如果需要在组件内读取permission参数，可以使用useMatches钩子获取当前匹配的路由信息：

import { useMatches } from 'react-router-dom';

function Dashboard() {
  const matches = useMatches();
  const currentRoute = matches.at(-1); // 取最后一个匹配项（当前最具体的路由）
  const permission = currentRoute?.route.permission;

  return (
    <div>
      <h1>Dashboard</h1>
      {permission && <p>当前路由权限：{permission.join(', ')}</p>}
    </div>
  );
}

export default Dashboard;

也可以在路由的loader/action函数中直接访问自定义参数：

const router = createBrowserRouter([
  {
    path: '/',
    element: <Dashboard />,
    permission: ['edit'],
    loader: ({ route }) => {
      console.log('路由权限配置：', route.permission);
      // 这里可以基于权限做数据校验或接口请求逻辑
      return null;
    },
  },
]);

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