react-router-dom v6路由怎么配置

在 react-router-dom v6 中，路由配置方式有所变化。以下是基本的路由配置方式：

1. 首先，需要安装 react-router-dom v6：

npm install react-router-dom@next

2. 在 App.js 文件中导入 `Routes` 和 `Route` 组件：

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

3. 在 `Routes` 组件中添加路由配置，其中 `Route` 组件定义了一个路由：

function App() {
  return (
    <div>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </div>
  );
}

4. 在每个组件中，需要导入 `useNavigate` 钩子，用于在组件中进行页面跳转：

import { useNavigate } from 'react-router-dom';

function Home() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate('/about');
  };

  return (
    <div>
      <h1>Home</h1>
      <button onClick={handleClick}>Go to About page</button>
    </div>
  );
}

5. 如果需要在组件中获取路由参数，可以使用 `useParams` 钩子：

import { useParams } from 'react-router-dom';

function About() {
  const { id } = useParams();

  return (
    <div>
      <h1>About</h1>
      <p>ID: {id}</p>
    </div>
  );
}

以上就是 react-router-dom v6 路由的基本配置方式。