随着前端应用的变得越来越复杂，单页应用已经不能满足我们的需求，因此使用路由来实现多页面应用就显得尤为重要。其中，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的路由功能，实现更加丰富的页面表现。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/198325.html
微信扫一扫 
支付宝扫一扫 