Route Lazy Dynamic Import not showing

[lechsa]

Hey guys,

I'm following an example for "lazy loading router provider". But when I navigate to the components that is using route lazy import which is the Register page, the page is blank and not showing anything, the chunk is downloaded but the component is not rendered.

It's working if I use React.lazy but not with the Route lazy import. Maybe I'm doing something wrong?

I've tried to follow this article as well Lazy Loading Routes in React Router 6.4+ but it's still not working.

import { Link, createBrowserRouter, RouterProvider, Outlet } from 'react-router-dom';
import Home from './pages/Home';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
    children: [
      {
        index: true,
        element: <Home />,
      },
      {
        path: 'register',
        lazy: () => import('./pages/Register'),
      }
    ],
  },
]);

function App() {
  return (
    <RouterProvider router={router} fallbackElement={<h1>Loading...</h1>} />
  );
}

function Layout() {
  return (
    <>
    <nav>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/register">Register</Link></li>
      </ul>
    </nav>

    <hr />

    <Outlet />
    </>
  );
}

export default App;

[saudpunjwani101]

Which version of react-router are you using? Make sure you're on the latest version which currently is 6.16.0