Code-Splitting and Lazy Loading with TanStack Router

Illustrate how to use code-splitting and lazy loading features in TanStack Router to optimize the performance of a JavaScript application.

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import React from 'react';

Import necessary modules from 'react-router-dom' and 'react' to set up the router and enable lazy loading.

const Home = React.lazy(() => import('./components/Home'));
const About = React.lazy(() => import('./components/About'));

Define lazily loaded components using React.lazy for Home and About pages. These components will be loaded only when needed.

const router = createBrowserRouter([
  { path: '/', element: <Home /> },
  { path: '/about', element: <About /> }
]);

Create a browser router and define routes using lazily loaded components. Each route is associated with a component.

function App() {
  return <RouterProvider router={router} />;
}

Define the App component that utilizes RouterProvider for routing control within the application.