使用BrowserRouter延迟和悬念延迟加载页面

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';

const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </BrowserRouter>
  );
};

export default App;

import React from 'react';

const About = () => {
  return <h2>About Page</h2>;
};

export default About;

import React, { Suspense } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from './components/Home';

const App = () => {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route
            path="/about"
            component={React.lazy(() => import('./components/About'))}
          />
        </Switch>
      </Suspense>
    </BrowserRouter>
  );
};

export default App;