javascript - 如何在React中执行返回功能

Question

这个问题已经有答案了:

react-router (v4) how to go back? (14 个回答)

Uncaught TypeError: Cannot read property 'push' of undefined (React-Router-Dom) (7 个回答)

已关闭 5 年前。

我正在使用 react-router v.4，我想执行一些返回功能。

我当前的代码如下所示:

<HashRouter>
       <Switch>
            <Route exact path='/' component={Main}/>
            <Route path='/secondview' component={SecondView}/>
            <Route path='/traineeships' render={()=>(<Traineeship rootState={this.state} setRootState={this.setState.bind(this)} />)}/>
            <Route path='/information-filter' render={()=>(<InformationFilter rootState={this.state} setRootState={this.setState.bind(this)} />)}/>
            <Route path='/find-work' render={()=>(<FindWork rootState={this.state} setRootState={this.setState.bind(this)} />)}/>
            <Route path='/information-job' render={()=>(<InformationJob rootState={this.state} setRootState={this.setState.bind(this)} />)}/>
            <Redirect from='*' to='/' />
       </Switch>

我尝试了几个选项，例如 this.props.history.go(-1)在其他组件上，但我收到了未定义的错误。

有人知道如何在我的情况下执行返回功能吗？

Answer 1

如果您需要访问历史对象，可以使用withRouter:

import React from 'react'
import { withRouter } from 'react-router'

class SecondView extends React.Component {
  render() {
    return (
      <button onClick={() => this.props.history.go(-1)} />
    )
  }
}

const SecondViewnWithRouter = withRouter(SecondView)

withRouter will pass updated match, location, and history props to the wrapped component whenever it renders.

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md