Tenía este componente MainRouting.js :
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;Estaba funcionando bien. Pero ahora ya no funciona después de actualizar a react-router v6.
Veo este error:
index.js:1 Advertencia: las funciones no son válidas como hijo de React. Esto puede suceder si devuelve un Componente en lugar de hacerlo desde el procesamiento. O tal vez quisiste llamar a esta función en lugar de devolverla. en Rutas
en MainRouting
en div
en div
en div
en el panel
en LocalizationProvider
en el enrutador
en el enrutador del navegador
¿Cómo puedo arreglar esto?
Nota: Ya actualicé NotFound para que coincida con la nueva sintaxis.
Para mí, tuve que hacer esto:
<Routes> { routes.map(route => { const Component = route.component; return <Route key={route.path} path={route.path} element={<Component />} /> }) } <Route path='*' element={<NotFound />} /> </Routes>La clave eran estas líneas:
const Component = route.component;Y
element={<Component />}