I had this MainRouting.js component:
import routes from '../Routes.js';
import { Routes, Route } from "react-router-dom";
import NotFound from '../Panel/NotFound';
const MainRouting = () => {
return (
<Routes>
{
routes.map(route =>
<Route
key={route.path}
path={route.path}
exact
element={route.component} />)
}
<Route path='*' element={<NotFound />} />
</Routes>
);
}
export default MainRouting;
It was working just fine. But now it's not working anymore after I upgraded to react-router v6.
I see this error:
index.js:1 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it. at Routes
at MainRouting
at div
at div
at div
at Panel
at LocalizationProvider
at Router
at BrowserRouter
How can I fix this?
Note: I already updated NotFound to match new syntax.
For me, I had to do this:
<Routes>
{
routes.map(route => {
const Component = route.component;
return <Route
key={route.path}
path={route.path}
element={<Component />}
/>
})
}
<Route
path='*'
element={<NotFound />}
/>
</Routes>
The key was these lines:
const Component = route.component;
And
element={<Component />}