This is the code:
App
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;
NotFound
function NotFound() { return "NotFound"; } export default NotFound;
https://codesandbox.io/s/summer-sound-giti8c?file=/src/App.js
I want that when someone goes to the base url say https://giti8c.csb.app/
then NotFound
component should be rendered.
Currently, only Base
component renders on going to the base url.
Advertisement
Answer
I want that when someone goes to the base url say
"https://giti8c.csb.app/"
thenNotFound
component should be rendered.
Make an index route that also renders the NotFound
component, to be matched and rendered only when the path exactly matches the parent route rendering the Outlet
component.
See Index Routes
Example:
<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>