React Router Nested Routes and 404 Page

import { Routes, Route } from "react-router-dom";
import NotFound from "./pages/NotFound";

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/courses" element={<Courses />} />
  <Route path="/courses/:courseId" element={<CourseDetails />} />
  <Route path="*" element={<NotFound />} />
</Routes>

import { Link } from "react-router-dom";

function NotFound() {
  return (
    <div className="not-found">
      <h1>404 — Page not found</h1>
      <p>The page you are looking for does not exist.</p>
      <Link to="/">Go to homepage</Link>
    </div>
  );
}

export default NotFound;

<Routes>
  <Route path="/dashboard" element={<DashboardLayout />}>
    <Route index element={<Overview />} />
    <Route path="courses" element={<MyCourses />} />
    <Route path="profile" element={<Profile />} />
  </Route>
</Routes>

import { Outlet, NavLink } from "react-router-dom";

function DashboardLayout() {
  return (
    <div className="dashboard">
      <aside>
        <NavLink to="/dashboard">Overview</NavLink>
        <NavLink to="/dashboard/courses">My Courses</NavLink>
        <NavLink to="/dashboard/profile">Profile</NavLink>
      </aside>

      <main>
        <Outlet />
      </main>
    </div>
  );
}

export default DashboardLayout;