How to show not found on base url

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.

Answer

I want that when someone goes to the base url say "https://giti8c.csb.app/" then NotFound 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>

Advertisement

Answer