javascript - 如何将组件从数组传递到路由react-router-dom( typescript )

Question

我尝试过这样的方法，以前确实有效。但现在，当我尝试新项目时，它不起作用。错误是“JSX 元素类型‘Element’没有任何构造或调用签名。”

应用程序.tsx:

import { BrowserRouter, HashRouter, Route, Routes, Navigate } from 'react-router-dom';
import { routes } from './Routes/routes';

function App() {

  return (
      <BrowserRouter>
            <Routes>
              {
                routes.map(({ path, element: Element }) =>
                  <Route key={path} path={path} element={<Element />}></Route>
                )
              }
              <Route path="*" element={<Navigate replace to="/cards" />} />
            </Routes>
      </BrowserRouter>
  );
}

export default App;

路由数组类型:

import React, { FC } from 'react';

export interface IRoute {
  path: string,
  element?: FC
}

路由数组:

import CardList from "../components/pages/CardList";
import { IRoute } from "../models/IRoute";


export const routes: IRoute[] = [
  { path: '/cards', element: CardList },
];

如果使用RouteObject类型会出错

Answer 1

由于您主要遵守react-router-dom的Route组件API，我建议导入react -router-dom 的 RouteObject输入而不是重新声明您自己的。这可确保正确输入。

import { RouteObject } from 'react-router-dom';
import CardList from "../components/pages/CardList";

export const routes: RouteObject[] = [
  { path: "/cards", element: <CardList /> },
];

import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom';
import { routes } from './Routes/routes';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {routes.map(({ path, element }) =>
          <Route key={path} path={path} element={element} />
        )}
        <Route path="*" element={<Navigate replace to="/cards" />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

如果将所有路由(即“catch-all”路由)移动到路由配置并使用 useRoutes ，您也可以简化渲染。钩。它处理所有路线“映射”和渲染。

示例:

import { RouteObject } from 'react-router-dom';
import CardList from "../components/pages/CardList";

export const routes: RouteObject[] = [
  { path: "/cards", element: <CardList /> },
  ....
  { path: "*", element: <Navigate replace to="/cards" /> },
];

import { BrowserRouter, useRoutes } from 'react-router-dom';
import { routes } from './Routes/routes';

function App() {
  const appRoutes = useRoutes(routes);
  return (
    <BrowserRouter>
      {appRoutes}
    </BrowserRouter>
  );
}

export default App;

这里的要点是，您不应该重新发明 RRD 提供的“轮子”。