如何用地图缩短我的反应路线？

Question

我所拥有的

import Home from "./components/underpages/Home";
import Kontakt from "./components/underpages/Kontakt";
import FAQ from "./components/underpages/FAQ";

// [...]


<Routes>
        <Route path="/"           element={<Home      />} />
        <Route path="/Kontakt"    element={<Kontakt   />} />
        <Route path="/FAQ"        element={<FAQ       />} />
      </Routes>

我想要的：

{siteList.map((sites) => (
              import {site.Name} from "./components/underpages" + {site.path};
            ))}

// [...]

 {siteList.map((sites) => (
              <Route
              path=   {site.path}
              element={<{site.emelent}  />}
              />
            ))}

有什么办法像这样的吗？

我想缩短我的Routes并使用.map-function。这样的话，它就不起作用了，但是还有别的办法吗？

Answer 1

您可以简单地制作数组

就像这样：

const routes = [
  {
    path:'/',
    element:Home,
  },
  {
    path:'/Kontakt',
    element:Kontakt,
  },
  {
    path:'/FAQ',
    element:FAQ,
  }
]

并以这样的方式使用：

      <Routes>
        {
          routes.map(({path,element:Component})=>{
            <Route path={path}           element={<Component/>} />
          })
        }
      </Routes>

Answer 2

当您可以将所有路由加载到一个数组中并对它们进行映射时：

import Home from "./components/underpages/Home";
import Kontakt from "./components/underpages/Kontakt";
import FAQ from "./components/underpages/FAQ";

const routes = [
  {
    path: "/",
    Component: Home,
  },
  {
    path: "/Kontakt",
    Component: Kontakt,
  },
  {
    path: "/FAQ",
    Component: FAQ,
  },
];

...

<Routes>
  {routes.map(({ path, Component }) => (
    <Route key={path} path={path} element={<Component />} />
  ))}
</Routes>

一种更简单的方法是使用更优化的路由配置和由useRoutes提供的react-router-dom挂钩。

示例：

import { useRoutes } from 'react-router-dom';
import Home from "./components/underpages/Home";
import Kontakt from "./components/underpages/Kontakt";
import FAQ from "./components/underpages/FAQ";

const routes = [
  {
    path: "/",
    element: <Home />,
  },
  {
    path: "/Kontakt",
    element: <Kontakt />,
  },
  {
    path: "/FAQ",
    element: <FAQ />,
  },
];

...

const routeElements = useRoutes(routes);

...

return routeElements;