我怎樣才能用 map 縮短我的反應路線？

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函數。 這樣是行不通的，請問還有別的辦法嗎？

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

雖然您可以將所有路由加載到一個數組中，並在它們上面加載 map：

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>

更簡單的方法是使用更優化的路由配置和react-router-dom提供的useRoutes鈎子。

例子：

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;