react-router-dom（v6）的学习和使用配合React.lazy()

import React from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
 
// 使用React.lazy()来代码分割导入组件
const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));
 
function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
 
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}
 
export default App;

这个例子展示了如何在使用react-router-dom v6时，配合React.lazy()来实现代码分割（Code Splitting）。这里，我们定义了两个异步加载的组件Home和About，并且在<Routes>元素中通过<Route>指定了路由。这样，当用户访问不同的路由时，对应的组件会被异步加载，从而提高应用的加载速度和性能。