How can I implement code splitting with React Router?

How can I implement code splitting with React Router?

You can implement code splitting in React Router using dynamic imports with React.lazy and Suspense. Would you like a code example?

Yes, please provide a code example.

Sure! Here's a simple example:

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

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

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route path='/' exact component={Home} />
          <Route path='/about' component={About} />
        </Switch>
      </Suspense>
    </Router>
  );
}

This will split your code and load components only when needed.

What are the benefits of using code splitting?

Code splitting improves your app's performance by reducing the initial load time. It loads only the necessary code for the current route, which can lead to faster rendering and a better user experience.