Así que estoy creando una aplicación de reacción súper simple y estoy tratando de usar el enrutamiento, pero esto:
const routing = ( <Router> <React.StrictMode> <Routes> <Route exact path="/" component={App} /> <Route exact path="/404" component={<NotFound />} /> </Routes> </React.StrictMode> </Router> )No funciona del todo. Mis importaciones también son buenas.
import { Route, BrowserRouter as Router, Routes } from "react-router-dom"; sin embargo, cada vez que lo ejecuto, sin importar a qué URL vaya, siempre me da {App} . ¿Por qué es esto?
El código está en app.js y lo estoy importando a index.js
Como está usando la versión 6.3.0 de react-router-dom , necesita usar element en lugar de component . Y el atributo exact no es compatible con react-router-dom . Por defecto coincide con la ruta exacta. Para hacer coincidir cualquier ruta no encontrada , use "*" en la ruta de la ruta.
Importe BrowserRouter tal como está:
import { Route, BrowserRouter, Routes } from "react-router-dom"; const routing = ( <React.StrictMode> <BrowserRouter> <Routes> <Route path="/" element={<App />} /> <Route path="*" element={<NotFound />} /> </Routes> </BrowserRouter> </React.StrictMode> )Supuse que estás usando la versión 6 react-router-dom .
Debe proporcionar un elemento JSX como element={<App />} en lugar de component={App} .
Necesitas -
const routing = ( <React.StrictMode> <Router> <Routes> <Route path="/" element={<App />} /> <Route path="*" element={<NotFound />} /> </Routes> </Router> </React.StrictMode> ) Tenga en cuenta que no he usado ninguno de los exact porque el enrutador de reacción v6 puede comprender de manera inteligente qué elemento de la ruta debe coincidir y lo hace coincidir correctamente sin usar exact .
Lea esta guía de migración: https://reactrouter.com/en/v6.3.0/upgrading/v5