当前位置：首页 > React

react 类组件如何切换路由

2026-01-25 08:34:17React

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

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

react 类组件如何切换路由

npm install react-router-dom

import React from '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);

通过 `useHistory` Hook 的变通方案

若项目使用 React 16.8+，可通过封装高阶组件或自定义 Hook 将 useHistory 的功能传递给类组件。创建一个中间函数组件来传递 history 对象。

react 类组件如何切换路由

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

function withHistory(Component) {
  return function WrappedComponent(props) {
    const history = useHistory();
    return <Component {...props} history={history} />;
  };
}

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

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

export default withHistory(MyComponent);

直接使用 `history` 对象

在类组件中直接使用 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>;
  }
}

export default MyComponent;

通过上下文访问路由（不推荐）

React Router 的上下文提供 router 对象，可通过 contextType 访问，但此方法依赖于 React 的旧版上下文 API，可能在未来版本中失效。

import React from 'react';
import { Router } from 'react-router-dom';

class MyComponent extends React.Component {
  static contextType = Router; // 依赖旧版上下文

  handleClick = () => {
    this.context.history.push('/target-path');
  };

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

export default MyComponent;