RouteMapper 不是 <Route> 组件。 <Routes> 的所有子组件必须是 <Route> 或 <React.Fragment>

Question

我在使用 React Router V6 时遇到问题。基本上，我试图在包含路由（路径、组件等）的整个文件中进行映射。我遇到的问题是我正在尝试将这些路线映射到另一条路线内，因为我正在使用布局（必须使用该布局，因为 2 条路线不使用该布局，所以这就是原因）。当我映射 <Route/> 组件时一切正常，因为该组件来自 react-router-dom，但是当我使用名为 RouteMapper 的辅助组件时，这就是我遇到的问题。

带路由的文件

import { Home, About, Profile} from "../../pages";

export const generalRoutes = [
  {
    path: "/",
    exact: true,
    component: <Home />,
  },
  {
    path: "/about",
    exact: true,
    component: <About/>,
  },
  {
    path: "/profile",
    exact: true,
    component: <Profile />,
  },
];

RouteMapper.jsx

import React from "react";
import { Route } from "react-router-dom";

const RouteMapper = ({ route }) => {
  return (
    <Route path={route.path} element={route.component} exact={route.exact} />
  );
};

export default RouteMapper;

General.jsx

const General = () => {
  return (
    <>
      <Routes>
        <Route path="/" element={<Layout />}>
          {generalRoutes?.map((route, index) => {
            return <RouteMapper route={route} key={index} />;
          })}
        </Route>
      </Routes>
    </>
  );
};

export default General;

这里我遇到了一个错误。我正在使用 helper 组件，因为我还将实现身份验证，因此以这种方式实现它会容易得多。

Answer 1

您不能直接渲染 Route 组件，并且 RouteMapper 组件不能是 Routes 或 Route 组件的子组件。

尽管如此，您可以将 generalRoutes 映射到 Route 组件，尤其是考虑到它所做的只是将 props 代理到 Route 组件。

const General = () => {
  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        {generalRoutes?.map((route) => (
          <Route
            key={route.path}
            path={route.path}
            element={route.component}
          />
        ))}
      </Route>
    </Routes>
  );
};

您可能会发现使用 useRoutes 挂钩将 generalRoutes 重新配置为 full-fledged 路由配置可能更容易使用。

示例：

import { Home, About, Profile } from "../../pages";

export const appRoutes = [
  // Routes rendered into Layout outlet
  {
    element: <Layout />
    children: [
      {
        path: "/",
        element: <Home />,
      },
      {
        path: "/about",
        element: <About/>,
      },
      ....

      // Routes rendered into an Auth outlet
      {
        element: <AuthLayout />,
        children: [
          {
            path: "/profile",
            element: <Profile />,
          },
          ....
        ],
      },
    ],
  },

  // Routes not rendered into Layout
  {
    path: "/other",
    element: <Profile />,
  },
  ....
];

...

const routes = useRoutes(appRoutes);

...

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

RouteMapper 不是 <Route> 组件。 <Routes> 的所有子组件必须是 <Route> 或 <React.Fragment>

RouteMapper is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

reactjs

react-router

带路由的文件

RouteMapper.jsx

General.jsx