react router v6的基本使用

React Router v6 是 React 中一个非常流行的路由库，它提供了一种方便的方式来处理 Web 应用程序中的路由。下面是 React Router v6 的基本使用：

1. 安装 React Router v6

npm install react-router-dom@next

2. 在你的代码中导入 `BrowserRouter` 和 `Routes` 组件

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

3. 在 `Routes` 组件中定义你的路由

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
      </Routes>
    </BrowserRouter>
  );
}

4. 在 `Route` 组件中定义每个路由的路径和对应的组件

function HomePage() {
  return <h1>Home Page</h1>;
}

function AboutPage() {
  return <h1>About Page</h1>;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
      </Routes>
    </BrowserRouter>
  );
}

5. 如果需要传递参数，可以在路径中使用 `:` 符号

function UserPage() {
  const { userId } = useParams();
  return <h1>User Page: {userId}</h1>;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
        <Route path="/users/:userId" element={<UserPage />} />
      </Routes>
    </BrowserRouter>
  );
}

以上就是 React Router v6 的基本使用方法，更多高级特性可以参考官方文档。