react 路由返回上一页怎么实现
时间: 2024-01-30 08:42:07 浏览: 134
在 React 中实现路由返回上一页可以使用 `react-router-dom` 库提供的 `history` 对象中的 `goBack()` 方法,该方法可以回退到上一个历史记录。
1. 首先需要在组件中引入 `withRouter` 方法,使得组件能够获取 `history` 对象:
```javascript
import { withRouter } from 'react-router-dom';
```
2. 在组件中定义返回按钮,并添加点击事件:
```javascript
<button onClick={this.goBack}>返回</button>
```
3. 实现 `goBack()` 方法,使用 `history` 对象的 `goBack()` 方法进行返回操作:
```javascript
goBack = () => {
this.props.history.goBack();
}
```
完整代码示例:
```javascript
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
class MyComponent extends Component {
goBack = () => {
this.props.history.goBack();
}
render() {
return (
<div>
<button onClick={this.goBack}>返回</button>
<h1>这是我的组件</h1>
</div>
);
}
}
export default withRouter(MyComponent);
```
阅读全文