0
235
Viewsmapping 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?
2 answers
Answer question0
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
0
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>