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>