Use useLocation to get the current location and then pass location.key as the key prop to the . This forces React to unmount the previous route immediately when the location changes, which triggers the Suspense fallback while the new component loads.

This behavior stems from how React Router v6 (especially v6.4+ with its new data APIs and lazy loading) handles route transitions. In these newer versions, the previous route's component can remain mounted until the new one is fully loaded, which is why you might see the old page "frozen" during slow transitions.

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

const Layout = () => {
  const location = useLocation();
  return (
    <div>
      <header>Header</header>
      <main>
        <Outlet key={location.key} />
      </main>
    </div>
  );
};

export default Layout;