react的history如何跳转路由
使用 useHistory Hook（React Router v5）
在函数组件中，可以通过 useHistory Hook 获取 history 对象，调用 push、replace 或 go 等方法实现路由跳转。
import { useHistory } from 'react-router-dom';
function MyComponent() {
const history = useHistory();
// 跳转到指定路径
history.push('/target-path');
// 替换当前路由（不保留历史记录）
history.replace('/new-path');
// 返回上一页
history.goBack();
// 前进一页
history.goForward();
}使用 withRouter 高阶组件（React Router v5）
在类组件中，可以通过 withRouter 高阶组件注入 history 对象。
import { withRouter } from 'react-router-dom';
class MyComponent extends React.Component {
handleClick = () => {
this.props.history.push('/target-path');
};
render() {
return <button onClick={this.handleClick}>跳转</button>;
}
}
export default withRouter(MyComponent);使用 useNavigate Hook（React Router v6）
React Router v6 移除了 useHistory，改用 useNavigate Hook 实现路由跳转。
import { useNavigate } from 'react-router-dom';
function MyComponent() {
const navigate = useNavigate();
// 跳转到指定路径
navigate('/target-path');
// 替换当前路由（可配置选项）
navigate('/new-path', { replace: true });
// 返回上一页
navigate(-1);
// 前进一页
navigate(1);
}直接操作 history 对象（通用方法）
通过创建自定义 history 对象（如 createBrowserHistory），可以在非组件环境中直接操作路由。
import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
// 跳转路由
history.push('/target-path');
// 监听路由变化
history.listen((location) => {
console.log('路由变化:', location.pathname);
});注意事项
- React Router v6 中不再推荐使用
history直接操作路由，建议优先使用useNavigate。 - 跳转时可通过对象传递
state参数：navigate('/target', { state: { id: 123 } }); - 在类组件中使用 React Router v6 时，需通过
useNavigate的包装器或上下文传递导航方法。
