Acabo de actualizar a v6beta para reaccionar-router-dom porque quería organizar mis rutas, pero la página 404 ahora está rota:
export function AllRoutes(props) { return( <Routes> <Route path="/about-us"> <Route path="contact"> <AboutContact/> </Route> <Route path="our-logo"> <AboutLogo/> </Route> <Route path="the-mission"> <AboutMission/> </Route> <Route path="the-team"> <AboutTeam/> </Route> <Route path="our-work"> <AboutWork/> </Route> </Route> <Route path="/user"> <Route path="sign-in"> <UserSignIn/> </Route> <Route path="sign-up"> <UserSignUp/> </Route> </Route> <Route path="/"> <Home/> </Route> <Route > <NotFound/> </Route> </Routes> ) } Entonces, todo funciona como se esperaba (incluida la página de inicio), excepto la página no encontrada, que no funciona incluso al agregar path="/*" o path="*"
¿Alguna solución fácil para esto?
<Routes> // Use it in this way, and it should work: <Route path='*' element={<NotFound />} /> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> <Route path="/settings" element={<Settings />} /> </Routes>Lo único que tiene que hacer es representar una ruta con una ruta de *, y React Router se asegurará de representar solo el elemento si ninguna de las otras rutas coincide. (si el nombre de su componente 404 es PageNotFound>
<Ruta path="*" element={<PageNotFound/>} />
1 enlace Stackblitz (su implementación es un poco diferente)
React Router v6 no usa el atributo exacto para hacer coincidir las rutas exactas. Por defecto coincide con la ruta exacta. Para hacer coincidir cualquier valor, use "*" en la ruta de la ruta.
<BrowserRouter> <div className="App"> <Header /> </div> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> <Route path="/profile" element={<Profile />} /> <Route path="*" element={<NotFound />} /> </Routes> </BrowserRouter> enter code here