在 react-router-dom v6 中配置路由

Question

我正在使用带有打字稿的 react-router-dom。我创建了一个配置文件，如下所示：

export interface RouteComponent {
  path?: string;
  element?: React.ComponentType<any>;
  children?: RouteComponent[];
}

const routes: RouteComponent[] = [
  {
    element: MenuLayout,
    children: [
      {
        path: "corp-list",
        element: CorpList,
      },
      {
        path: "/corp-list/:id",
        element: DetailCorp,
      },
    ],
  },
  {
    children: [
      {
        path: "auth/login",
        element: Login,
      },
      {
        path: "auth/signup",
        element: Login,
      },
    ],
  },
];

然后，我将其映射到 App.tsx 文件

中的渲染路径

{routes.map((route, index) => (
        <Route
          path={route.path as string}
          element={route.element}
        />
      ))}

它显示了一个类型的错误，Route 组件中的 element 接受了类型为 ReactNode 的子节点，而不是上面的 React.Component。但是当我尝试在 ReactNode 类型的配置路由中声明 element 时，例如：

{ path: "corp-list", element: <CorpList /> },

它大喊“CorpList 指的是一个值，但在这里被用作类型”。

那么，如何解决这个问题？而且，你如何在 react-router-dom v6 中配置路由，有什么建议吗？提前致谢！

Answer 1

如果您要创建路由配置，则使用 react-router-dom 导出类型，在本例中为 RouteObject。

RouteObject

/**
 * A route object represents a logical route, with (optionally) its child
 * routes organized in a tree-like structure.
 */
export interface RouteObject {
  caseSensitive?: boolean;
  children?: RouteObject[];
  element?: React.ReactNode;
  index?: boolean;
  path?: string;
}

与类型声明的主要区别在于 element 是 React.ReactNode 而 children 是 RouteObject.

的数组

导入 RouteObject 并在您的配置中将 element 值作为 JSX 传递。

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

const routesConfig: RouteObject[] = [
  {
    element: <MenuLayout />,
    children: [
      {
        path: "corp-list",
        element: <CorpList />
      },
      {
        path: "corp-list/:id",
        element: <DetailCorp />
      }
    ]
  },
  {
    children: [
      {
        path: "auth/login",
        element: <Login />
      },
      {
        path: "auth/signup",
        element: <Login />
      }
    ]
  }
];

不要重新发明轮子，react-router-dom 导出一个钩子来使用路由配置对象和 returns 匹配的元素或 null。

useRoutes

The useRoutes hook is the functional equivalent of <Routes>, but it uses JavaScript objects instead of <Route> elements to define your routes. These objects have the same properties as normal <Route> elements, but they don't require JSX.

The return value of useRoutes is either a valid React element you can use to render the route tree, or null if nothing matched.

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

...

const routes = useRoutes(routesConfig);

return (
  ... nav bar ...
  {routes}
  ...
);

在 react-router-dom v6 中配置路由

Config route in react-router-dom v6

typescript

reactjs

react-router-dom