当前位置：首页 > React

react类组件如何切换路由

2026-01-25 06:30:15React

使用 `react-router-dom` 的 `withRouter` 高阶组件

在类组件中，可以通过 withRouter 高阶组件注入路由相关的 props（如 history、location、match）。安装 react-router-dom 后，将类组件用 withRouter 包裹即可访问路由方法。

react类组件如何切换路由

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` 的包装函数（React Router v6）

React Router v6 移除了 withRouter，推荐使用 Hook。类组件可通过创建一个高阶组件或工具函数来间接使用 useNavigate：

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

// 高阶组件包装
function withNavigate(Component) {
  return function WrappedComponent(props) {
    const navigate = useNavigate();
    return <Component {...props} navigate={navigate} />;
  };
}

class MyComponent extends React.Component {
  handleClick = () => {
    this.props.navigate('/target-path'); // 使用 navigate
  };

  render() {
    return <button onClick={this.handleClick}>跳转</button>;
  }
}

export default withNavigate(MyComponent);

通过 `History` 对象直接操作

如果项目中有自定义的 history 实例（如通过 createBrowserHistory 创建），可以直接在类组件中导入并操作：

import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

class MyComponent extends React.Component {
  handleClick = () => {
    history.push('/target-path'); // 直接调用
  };

  render() {
    return <button onClick={this.handleClick}>跳转</button>;
  }
}

注意事项

React Router 版本兼容性：v5 及以下用 withRouter，v6 需通过 Hook 或自定义包装。
路由参数传递：push 方法的第二个参数可传递状态（如 { state: { data } }），目标路由通过 location.state 获取。
编程式导航替代方案：history.replace 可替换当前路由而非新增记录。

react类组件如何切换路由