Tuve un problema con la migración entre react-router-dom v5 a v6. Después de actualizar mi paquete, realizo algunas actualizaciones en el código. A continuación se muestra mi versión de código en v5 y con v6 y también el componente de Routing que me da un problema.
v5
export default function App() { return ( <div className="App"> <Switch> <AppContextProvider> <Routing /> </AppContextProvider> </Switch> </div> ); }v6
export default function App() { return ( <div className="App"> <AppContextProvider> <Routes> <Routing /> </Routes> </AppContextProvider> </div> ); } Componente <Routing />
const Routing = (): JSX.Element => { return ( <> {publicRouting.map(({ path, component }, i) => ( <Route key={i} path={path} element={component} /> ))} {isAuthenticated() && ( <Main> {routing.map(({ path, component }, i) => ( <Route key={i} path={path} element={component} /> ))} </Main> )} </> ); };Ahora mismo la consola me lanza este error:
index.tsx:19 Uncaught Error: [Routing] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment> alguien me puede decir como solucionar este problema? Parece que este componente tiene un tipo incompatible y no puede ir como elemento secundario entre el componente Routes , pero ¿por qué lo cambiaron? ¿Cómo corregir mi componente de Routing ?
¡Gracias por cualquier ayuda!
En react-router-dom v6, el componente Routes solo puede tener Route o React.Fragment como elemento secundario válido, y el componente Route solo puede tener Routes u otro componente de Route como principal.
El componente Routes reemplazó efectivamente al componente Switch RRDv5 en el sentido de que maneja la lógica de representación y comparación de rutas, y ahora se requiere que envuelva directamente los componentes de Route que está administrando.
Mueva el componente Routes a Routing para envolver directamente los componentes de Route que se están asignando.
export default function App() { return ( <div className="App"> <AppContextProvider> <Routing /> </AppContextProvider> </div> ); }...
const Routing = (): JSX.Element => { return ( <> <Routes> {publicRouting.map(({ path, component }, i) => ( <Route key={i} path={path} element={component} /> ))} </Routes> {isAuthenticated() && ( <Main> <Routes> {routing.map(({ path, component }, i) => ( <Route key={i} path={path} element={component} /> ))} </Routes> </Main> )} </> ); };