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

Question

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?

How does `NonAuthLayout`,`Home`,`About` looks like? Please share reproducible example — Dennis Vash, Aug 17 '22 at 08:45
just made them using react snippet, nothing in there, I'm just providing the non-auth layout picture above. — Arijit, Aug 17 '22 at 08:51
Store the components like: `` in your routes and not as `Home`. So you have `{ component: , ... }` — Palladium02, Aug 17 '22 at 08:53

score 0 · Answer 1 · answered Aug 17 '22 at 09:05

I believe you are trying to render components using a dynamic component name like in this solution:

React / JSX Dynamic Component Name

It doesn't work because when you do const Component = route.component you are just getting the string (e.g. "Home" or "About")

Your variable needs to hold a reference to the component itself, not just the name of the component as a string

So, store your components in an array and render from it using the dynamic variable name returned from route.component

Something along the lines of:

import HomeComponent from './components/home'
import AboutComponent from './components/about'

const components = {
  home: HomeComponent,
  about: AboutComponent
}

const Component = components[route.component];

It's a bit of work to give the correct solution without seeing more of your code, but the concept (and your error) is quite fundamental, so it's best that you refer to both the post I linked above, and the official React docs here to understand this better:

https://reactjs.org/docs/jsx-in-depth.html#choosing-the-type-at-runtime

thank for posting this, learned a new thing today, but sorry mate its not what i'm looking — Arijit, Aug 17 '22 at 09:53

Drew Reese · Accepted Answer · 2022-08-17T16:18:41.113

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>

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

2 Answers2

But, there's a simpler way