A continuación, en el archivo App.js, el componente de rutas envuelve parte del sitio web, pero necesitaba que el componente NotFound se representara para toda la página si se ingresaba una URL incorrecta. Por favor, indique cómo se puede hacer esto en este caso. Agradecemos sus comentarios
const App = () => { return ( <Box> <CssBaseline /> <Navbar /> <Routes> <Route path="/" element={<Navigate to="/home" />} /> <Route path="/home" element={<Home />} /> <Route path="/tours" element={<Tours />} /> <Route path="/music" element={<Music />} /> <Route path="/contact" element={<ContactUs />} /> </Routes> <Testimonials /> <Footer /> </Box> ); };Utilice una ruta de diseño que represente la Navbar de navegación , los Testimonials , el pie de Footer y una Outlet para que se representen los componentes de Route anidados. NotFound el componente NotFound fuera de esta ruta de diseño.
Lea más sobre las rutas de diseño aquí .
Ejemplo:
import { Outlet } from 'react-router-dom'; const App Layout = () => ( <> <Navbar /> <Outlet /> // <-- nested routes render here <Testimonials /> <Footer /> </> );...
const App = () => { return ( <Box> <CssBaseline /> <Routes> <Route element={<AppLayout />}> <Route path="/home" element={<Home />} /> <Route path="/tours" element={<Tours />} /> <Route path="/music" element={<Music />} /> <Route path="/contact" element={<ContactUs />} /> </Route> <Route path="/" element={<Navigate to="/home" />} /> <Route path="*" element={<NotFound />} /> </Routes> </Box> ); }; Si el componente NotFound no necesita el estilo CSS base o el contenedor Box , muévalos también a los componentes AppLayout .
Simplemente puede usar una ruta comodín "*" después de todas las rutas válidas. De esta manera, primero intentará hacer coincidir la ruta del usuario actual con la ruta provista dentro <Route/> y si la ruta coincide con la ruta existente, representará el componente de esa ruta . Y cuando no coincida con su ruta existente, mostrará la wildcard route y dentro de la ruta comodín, puede mostrar la página 404 No encontrado . Por ejemplo:
const App = () => { return ( <Box> <CssBaseline /> <Navbar /> <Routes> <Route path="/" element={<Navigate to="/home" />} /> <Route path="/home" element={<Home />} /> <Route path="/tours" element={<Tours />} /> <Route path="/music" element={<Music />} /> <Route path="/contact" element={<ContactUs />} /> <Route path="*" element={<NotFoundComponent/>} /> </Routes> <Testimonials /> <Footer /> </Box> ); }; Nota: <Route path="*"/> debe colocarse después de todas las rutas existentes o, de lo contrario, su aplicación de reacción mostrará una página 404 cada vez
Todo lo que tiene que hacer es representar una Ruta con una ruta = " * " , y React Router se asegurará de representar el elemento solo si ninguna de las otras Rutas coincide.
Para react-router versión 6
<BrowserRouter> <Routes> <Route path="/" exact element={<Home />}></Route> <Route path="*" element={<PageNotFound />}></Route> </Routes> </BrowserRouter>Mostrar URL como 404 de página no encontrada
El componente de redirección se eliminó de la versión 6 de react-router. Para react-router-dom v6, simplemente reemplace Redirigir con Navegar
<Route path="/404" element={<PageNotFound></PageNotFound>} /> <Route path="*" element={<Navigate replace to="/404" />} />