react-router-lazy.js

import React from 'react';
import { lazy } from 'react-suspense-resource';

let Courses = lazy(() => import('./Courses.js'));
let CoursesIndex = lazy(() => import('./CoursesIndex.js'));

let routes = [
  {
    path: "courses",
    element: <Courses />,
    routes: [
      {
        path: ":id",
        element: <Course />,
        preload: ({ params: { id } }) => getCourse(id)
      },
      { path: "new", element: <NewCourse /> },
      { path: ".", element: <CoursesIndex /> },
      { path: "*", element: <CoursesNotFound /> }
    ]
  },
  {
    path: "courses",
    element: <Landing />,
    routes: [
      { path: "react-fundamentals", element: <ReactFundamentalsLanding /> },
      { path: "advanced-react", element: <AdvancedReactLanding /> }
    ]
  },
  { path: ".", element: <Home /> }
];