Exploring lazy pages and routes
In the Avoiding lazy components section, you saw where to avoid making components lazy when there is no benefit in doing so. The same pattern can be applied when you’re using react-router as the mechanism to navigate around your application. Let’s take a look at an example. Here are the imports we’ll need:
const First = React.lazy(() => import("./First"));
const Second = React.lazy(() => import("./Second"));
function Layout() {
return (
<section>
<nav>
<span>
<Link to="first">First</Link>
</span>
<span> | </span>
<span>
<Link to="second">Second</Link>
</span>
</nav>
<section>
<React.Suspense fallback={<FadeLoader color="lightblue" />}>
<Outlet />
</React.Suspense...
