React中使用history.push实现路由页面跳转

随着前端应用的变得越来越复杂，单页应用已经不能满足我们的需求，因此使用路由来实现多页面应用就显得尤为重要。其中，React提供的react-router库能够轻松的进行页面路由的管理，而其history API也提供了诸多方式用于页面跳转，其中history.push()方法就是最为常用的一种，本文将为大家详细介绍在React中如何使用history.push()来实现页面跳转。

一、history.push()是什么？

在React中使用路由实现页面跳转需要使用到history API，其中history.push()方法就是最常用的一种。history.push()实现的功能是将一个新地址加入到历史地址记录之中，以便在浏览器后退时重新回到该地址，同时显示新增的地址内容，这样就能实现页面的跳转操作。

history.push()的语法如下：

history.push(path, [state])

其中，path表示要跳转的地址，state是一个可选参数，是一个JavaScript对象，可以在跳转后新页面中的this.props.location.state中获取到，通常用于传递额外数据。

二、如何在React中使用history.push()实现页面跳转？

在React项目中，我们一般使用react-router-dom库来实现路由功能。在使用history.push()方法之前，我们需要确保以下两个前提条件：

1、在index.js文件中将App组件用BrowserRouter包裹起来，用于实现路由的监听：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

2、需要在当前组件中引入history对象，并在组件中使用withRouter高阶函数进行包裹，使得路由相关的属性可以被当前组件使用：

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

class MyComponent extends Component {
  handleClick = () => {
    const { history } = this.props;
    history.push('/newpage', { data: '额外的数据' });
  };

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

export default withRouter(MyComponent);

在上述代码中，我们首先引入了 withRouter 高阶函数，这样MyComponent组件就可以使用路由相关的属性。handleClick函数中使用props中传入的history.push()方法来进行页面的跳转，其中第一个参数是跳转的目标地址，第二个参数是可以传递的额外数据。渲染时，我们将按钮与handleClick函数相连接，点击按钮即可执行跳转操作。

三、history.push()的注意事项

在使用history.push()方法中，我们需要注意以下几点：

1、在使用history.push()方法跳转页面的时候，我们应该避免在生命周期函数中使用。因为在执行生命周期函数的时候，我们的 DOM 结构还未生成，此时如果执行跳转操作就会导致错误。一般来说正确的方法是在componentDidMount中或者点击事件中使用history.push()方法。

2、在页面跳转中我们可以使用history.goBack()方法回退到上一页，只需要简单的调用history.goBack()方法即可实现跳转，如下所示：

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

class MyComponent extends Component {
  handleGoBack = () => {
    const { history } = this.props;
    history.goBack();
  };

  render() {
    return (
      <button onClick={this.handleGoBack}>回到上一页</button>
    );
  }
}

export default withRouter(MyComponent);

3、在React中使用Redux的话，我们可以使用action creator 中的history.push()方法进行页面跳转操作，如下所示：

import { push } from 'connected-react-router';
 
function navigateTo(pathname, search = '') {
    return dispatch => {
        dispatch(push({
            pathname,
            search
        }));
    };
}

四、结语

在本文中，我们详细介绍了在React中使用history.push()方法实现页面跳转的方法，也针对一些需要注意的事项进行了说明。希望通过本文的讲解能够让大家更好的掌握React的路由功能，实现更加丰富的页面表现。