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

user_13404522 0
Viewed 496

I am having a issues when it comes to using the React Router V6. Basically I am trying to map throughout the file which contains the routes (paths, components etc..). The issue I am having is that I am trying to map those routes inside another route because I am using a layout (Have to use that layout since 2 routes do not that layout so that is why). Everything works when I am mapping the <Route/> component since that component is from react-router-dom, but when I am using the helper component called RouteMapper this is the problem I encounter.

File with routes

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;

Here I am getting an error. I am using the helper component since I will also implement authentication so it would be much easier for me to implement it this way.

react-router reactjs
1 Answers

You can't render Route components directly and the RouteMapper component can't be the child of the Routes or Route components.

You can map generalRoutes to Route components though, especially considering all it's doing is proxying props to a Route component.

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

You might find reconfiguring your generalRoutes into a full-fledged route config using the useRoutes hook might be a little easier to use.

Example:

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}
  ...
);
user_86908570
Related