Why my lazy loading isn't working in React?

when you use lazy you have to use it like this, instead of Component attribute inside the Route you have to use element and the value of element should me like this <lazyVariableName/>

import "./App.css";
import { lazy, Suspense } from "react";
import { Route } from "./Route.jsx";
import { Router } from "./Router.jsx";

const Home = lazy(() => import("./pages/Home.jsx"));
const About = lazy(() => import("./pages/About.jsx"));
const Search = lazy(() => import("./pages/Search.jsx"));

function App() {
  return (
    <main>
      <Suspense fallback={null}>
        <Router defaultComponent={() => <h1>404</h1>}>
          <Route path="/" element={<Home/>}></Route>
          <Route path="/about" element={<About/>}></Route>
          <Route path="/search/:query" element={<Search/>}></Route>
        </Router>
      </Suspense>
    </main>
  );
}

export default App;

While doing it that way does not give any more errors, it still does not take you to the pages in question. I guess it is due to the logic used by the whole program. What this does is to have a component called “Route” that has “path” and “Component” as parameters. The idea is that in the “Router”, it makes a .map of the “Route” children and returns in the variable “Page” the component to use, but as now the parameter “Component” is no longer used in “Route”, but the parameter “element”, it does not work. I have tried changing the “.Component” at the end of the declaration of the variable “Page” by “.element” but that doesn't work either. Do you have any idea why?

App.jsx:

import "./App.css";
import { lazy, Suspense } from "react";
import { Route } from "./Route.jsx";
import { Router } from "./Router.jsx";

const Home = lazy(() => import("./pages/Home.jsx"));
const About = lazy(() => import("./pages/About.jsx"));
const Search = lazy(() => import("./pages/Search.jsx"));

function App() {
  return (
    <main>
      <Suspense fallback={null}>
        <Router defaultComponent={() => <h1>404</h1>}>
          <Route path="/" element={<Home/>}></Route>
          <Route path="/about" element={<About/>}></Route>
          <Route path="/search/:query" element={<Search/>}></Route>
        </Router>
      </Suspense>
    </main>
  );
}

export default App;

Route.jsx:

// eslint-disable-next-line no-unused-vars
export function Route({ path, Component }) {
  return null;
}

Router.jsx:

import { EVENTS } from "./constants.js";
import { useState, useEffect, Children } from "react";
import { match } from "path-to-regexp";

export function Router({
  children,
  routes = [],
  defaultComponent: DefaultComponent = () => <h1>404</h1>,
}) {
  const [currentPath, setCurrentPath] = useState(window.location.pathname);

  useEffect(() => {
    const onLocationChange = () => {
      setCurrentPath(window.location.pathname);
    };

    window.addEventListener(EVENTS.PUSHSTATE, onLocationChange);
    window.addEventListener(EVENTS.POPSTATE, onLocationChange);

    return () => {
      window.removeEventListener(EVENTS.PUSHSTATE, onload);
      window.removeEventListener(EVENTS.POPSTATE, onLocationChange);
    };
  }, []);

  let routeParams = {};

  const routesFromChildren = Children.map(children, ({ props, type }) => {
    const { name } = type;
    const isRoute = name == "Route";

    return isRoute ? props : null;
  });

  let routesToUse = routes.concat(routesFromChildren);

  const Page = routesToUse.find(({ path }) => {
    if (path == currentPath) return true;

    const matcherUrl = match(path, { decode: decodeURIComponent });
    const matched = matcherUrl(currentPath);
    if (!matched) return false;

    routeParams = matched.params;
    return true;
  })?.Component;

  return Page ? (
    <Page routeParams={routeParams} />
  ) : (
    <DefaultComponent routeParams={routeParams} />
  );
}

The imported page must be a default export. This means the home, about and search pages need to have export default function About.

I don't know the reason behind this, but lazy doesn't know which component to renderize without default

I had the same issue, You can use "The imported page must be a default export. This means the home, about and search pages need to have export default function About."