在 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
实例,但您可以使用上述钩子来实现类似的功能。如果您需要在组件之间共享历史实例,可以考虑创建一个自定义钩子或将导航和路由信息作为上下文传递。
领取专属 10元无门槛券
手把手带您无忧上云