mapping doesn’t work inside react-router-dom’s Routes component

instead of type everything manually ,I just want to render my routes as an array.

export const routes = [
  {
    path: "/",
    component: Home,
    layout: NonAuthLayout,
  },
  {
    path: "/about",
    component: About,
    layout: NonAuthLayout,
  },
];

and in my app.js file, I did something like this:

<BrowserRouter>
        <Routes>
          {routes.map((route, index) => {
            const Component = route.component;
            const Layout = route.layout || Fragment;
            return (
              <Route
                key={index}
                path={route.path}
                element={
                  <Layout>
                    <Component />
                  </Layout>
                }
              />
            );
          })}
        </Routes>
      </BrowserRouter>

But its giving error , while I tried to execute it.

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
    at Routes (http://localhost:3000/static/js/bundle.js:57985:5)
    at InnerThemeProvider (http://localhost:3000/static/js/bundle.js:12771:70)
    at ThemeProvider (http://localhost:3000/static/js/bundle.js:12462:5)
    at ThemeProvider (http://localhost:3000/static/js/bundle.js:12791:5)
    at Router (http://localhost:3000/static/js/bundle.js:57918:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:56727:5)
    at App
    at SettingProvider (http://localhost:3000/static/js/bundle.js:174:5)

but but, If I put like this it works:

<Route path=”/” element={} />

update- non-auth layout piucture

I think , I did some silly mistake. can someone correct me here?

Answer

I don’t see any overt issue with your code, and it in fact appears to run without issue.

I suspect you may have a component export/import issue with one or more of the Home, About, and NonAuthLayout components, so double check these.

But, there’s a simpler way

Don’t re-invent the wheel. react-router-dom exports a useRoutes hook that effectively does this.

Reconfigure your routes config to comply with the RRD syntax:

export const routes = [
  {
    element: <NonAuthLayout />,
    children: [
      {
        path: "/",
        element: <Home />,
      },
      {
        path: "/about",
        element: <About />,
      },
    ],
  },
];

NonAuthLayout

NonAuthLayout is now a layout route and needs to render an Outlet instead of a children prop.

import { Outlet } from 'react-router-dom';

const NonAuthLayout = () => (
  <Box>
    <div>
     <TopBar />
    </div>
    <Box>
      <Outlet />
    </Box>
  </Box>
);

App

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

...

const element = useRoutes(routes);

...

<BrowserRouter>
  {element}
</BrowserRouter>