react router v6方法

React Router v6 相对于 v5 有了一些重大变化，以下是一些常用的方法：

1. `<Routes>` 替代 `<Switch>` 和 `<Route>`，用于定义路由规则：

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

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/users" element={<Users />}>
        <Route path="/" element={<UsersList />} />
        <Route path=":id" element={<UserProfile />} />
      </Route>
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

2. `useNavigate` 代替 `history.push` 和 `history.replace`，用于编程式导航：

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

function LoginButton() {
  const navigate = useNavigate();
  const handleLoginClick = () => {
    // 登录成功后跳转到首页
    navigate('/');
  };
  return (
    <button onClick={handleLoginClick}>登录</button>
  );
}

3. `useParams` 代替 `match.params`，用于获取路由参数：

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

function UserProfile() {
  const { id } = useParams();
  return <div>用户ID：{id}</div>;
}

4. `useLocation` 代替 `location`，用于获取当前 URL 信息：

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

function Navbar() {
  const location = useLocation();
  return (
    <nav>
      <ul>
        <li className={location.pathname === '/' ? 'active' : ''}>
          <Link to="/">首页</Link>
        </li>
        <li className={location.pathname === '/about' ? 'active' : ''}>
          <Link to="/about">关于我们</Link>
        </li>
        <li className={location.pathname === '/contact' ? 'active' : ''}>
          <Link to="/contact">联系我们</Link>
        </li>
      </ul>
    </nav>
  );
}

以上是 React Router v6 中一些常用的方法，希望能对你有所帮助！