【React Router v6】快速上手react-router-dom6（对比 router5）

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
 
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/users/:id" element={<User />} />
        {/* 404 页面 */}
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}
 
function Home() {
  return <h2>Home</h2>;
}
 
function About() {
  return <h2>About</h2>;
}
 
function User() {
  return <h2>User</h2>;
}
 
function NotFound() {
  return <h2>404 Not Found</h2>;
}
 
export default App;

这个示例展示了如何在React Router v6中定义路由。它使用BrowserRouter作为路由的顶级组件，并通过Routes和Route组件配置路由规则。每个Route定义了一条路由规则，包括路径和对应的页面组件。此外，它还展示了如何使用动态路由参数（例如:id）以及如何定义一个404页面。这个示例代码简洁明了，并且清晰地展示了React Router v6的基本用法。