如何在使用react路由器v6时使用历史实例？

在 React Router v6 中，您不能直接访问 history 实例，因为 React Router v6 不再提供 withRouter 高阶组件或 useHistory 钩子

使用 useNavigate 和 useLocation 钩子

React Router v6 提供了 useNavigate 和 useLocation 钩子，它们提供了导航和访问路由状态的功能。

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

function MyComponent() {
  const navigate = useNavigate();
  const location = useLocation();

  // 使用 navigate 进行导航
  const goToHome = () => {
    navigate('/');
  };

  // 使用 location 获取当前路由信息
  console.log(location.pathname);

  return (
    <div>
      {/* ... */}
    </div>
  );
}

使用 useSearchParams 钩子

如果您需要访问查询参数，可以使用 useSearchParams 钩子。

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

function MyComponent() {
  const [searchParams] = useSearchParams();

  // 获取查询参数
  const myParam = searchParams.get('myParam');

  return (
    <div>
      {/* ... */}
    </div>
  );
}

虽然 React Router v6 不再提供 history 实例，但您可以使用上述钩子来实现类似的功能。如果您需要在组件之间共享历史实例，可以考虑创建一个自定义钩子或将导航和路由信息作为上下文传递。