Este es el código:
aplicación
import { Route, BrowserRouter as Router, Routes } from "react-router-dom"; import ClassroomDashboard from "./ClassroomDashboard"; import Students from "./Students"; import NotFound from "./NotFound"; import Base from "./Base"; import "./styles.css"; export default function App() { return ( <Router> <Routes> <Route path="/" element={<Base />}> <Route path="dashboard" element={<ClassroomDashboard />} /> <Route path="students" element={<Students />} /> <Route index element={<NotFound />} /> </Route> </Routes> </Router> ); }
Base
import { Outlet } from "react-router-dom"; function Base() { return <Outlet />; } export default Base;
Extraviado
function NotFound() { return "NotFound"; } export default NotFound;
https://codesandbox.io/s/summer-sound-giti8c?file=/src/App.js
Quiero que cuando alguien vaya a la URL base, diga https://giti8c.csb.app/
, entonces se debe procesar el componente NotFound
.
Actualmente, solo el componente Base
se procesa al ir a la URL base.
Quiero que cuando alguien vaya a la URL base diga
"https://giti8c.csb.app/"
, entonces se debe procesar el componenteNotFound
.
Cree una ruta de índice que también represente el componente NotFound
, para que coincida y se represente solo cuando la ruta coincida exactamente con la ruta principal que representa el componente Outlet
.
Ver Índice Rutas
Ejemplo:
<Router> <Routes> <Route path="/" element={<Base />}> <Route index element={<NotFound />} /> <Route path="dashboard" element={<ClassroomDashboard />} /> <Route path="students" element={<Students />} /> </Route> <Route path="*" element={<NotFound />} /> </Routes> </Router>