How can you implement route-based code splitting using React Router and React s lazy and Suspense

Question

Can i know How can you implement route-based code splitting using React Router and React's lazy and Suspense?

Answer 1

Route-Based Code Splitting with React Router + React.lazy & Suspense

Step-by-step:

Lazy load components:

import React, { lazy, Suspense } from 'react';

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

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

Wrap routes with Suspense:

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function App() {

  return (

    <Router>

      <Suspense fallback={<div>Loading...</div>}>

        <Routes>

          <Route path="/" element={<Home />} />

          <Route path="/about" element={<About />} />

        </Routes>

      </Suspense>

    </Router>

  );

}