Question

试图弄清楚如何返回上一页。我正在使用[react-router-v4][1]

这是我在第一个目标网页中配置的代码：

<Router>
  <div>
    <Link to="/"><div className="routerStyle"><Glyphicon glyph="home" /></div></Link>
    <Route exact path="/" component={Page1}/>
    <Route path="/Page2" component={Page2}/>
    <Route path="/Page3" component={Page3}/>
  </div>
</Router>

为了转发到后续页面，我只是这样做：

this.props.history.push('/Page2');

但是，我怎样才能回到上一页？尝试了下面提到的一些事情，但没有运气： 1. this.props.history.goBack();

给出错误：

TypeError：null不是对象（评估'this.props'）

this.context.router.goBack();

给出错误：

TypeError：null不是对象（评估'this.context'）

this.props.history.push('/');

给出错误：

TypeError：null不是对象（评估'this.props'）

在下方发布Page1代码：

import React, {Component} from 'react';
import {Button} from 'react-bootstrap';

class Page1 extends Component {
  constructor(props) {
    super(props);
    this.handleNext = this.handleNext.bind(this);
  }


  handleNext() {
    this.props.history.push('/page2');
  }

  handleBack() {
    this.props.history.push('/');
  }


  /*
   * Main render method of this class
   */
  render() {
    return (
      <div>
        {/* some component code */}


        <div className="navigationButtonsLeft">
          <Button onClick={this.handleBack} bsStyle="success">&lt; Back</Button>
        </div>
        <div className="navigationButtonsRight">
          <Button onClick={this.handleNext} bsStyle="success">Next &gt;</Button>
        </div>

      </div>
    );
  }


export default Page1;

Answer 1

我认为问题在于绑定：

constructor(props){
   super(props);
   this.goBack = this.goBack.bind(this); // i think you are missing this
}

goBack(){
    this.props.history.goBack();
}

.....

<button onClick={this.goBack}>Go Back</button>

正如我在你发布代码之前所假设的那样：

constructor(props) {
    super(props);
    this.handleNext = this.handleNext.bind(this);
    this.handleBack = this.handleBack.bind(this); // you are missing this line
}

Answer 2

this.props.history.goBack();

这是适用于react-router v4的正确解决方案

但是您要记住的一件事是，您需要确保this.props.history存在。

这意味着您需要在由

包装的组件内部调用此函数this.props.history.goBack();

如果在组件树中更深的组件中调用此函数，它将无法正常工作。

编辑：

如果要在组件树中更深的组件中包含历史记录对象（不被包裹），可以执行以下操作：

...
import {withRouter} from 'react-router-dom';

class Demo extends Component {
    ...
    // Inside this you can use this.props.history.goBack();
}

export default withRouter(Demo);

Answer 3

您可以在使用this.props.history.push('/Page2');的地方提供代码吗？

您是否尝试过goBack（）方法？

this.props.history.goBack();

此处列出https://reacttraining.com/react-router/web/api/history

这里有一个实例：https://reacttraining.com/react-router/web/example/modal-gallery

Answer 4

这是您解决此问题的最简洁方法，这也使this keyword的潜在陷阱无效。使用功能组件：

import { withRouter } from "react-router-dom"; 使用component App.js来包装withRouter()或更好的HOC，这样history就可以在“应用范围内”使用。包装组件只会使history available for that specific组件成为您的选择。

所以您有：

export default withRouter(App);
在Redux环境export default withRouter( connect(mapStateToProps, { })(App), );中，您甚至应该可以通过这种方式从动作创建者中使用history。

在您的component中执行以下操作：

import {useHistory} from react-router-dom;

const history = useHistory(); // do this inside the component

goBack = () => history.goBack();

<btn btn-sm btn-primary onclick={goBack}>Go Back</btn>

export default DemoComponent;

Gottcha useHistory仅从最新的v5.1 react-router-dom导出，因此请确保更新软件包。但是，您不必担心。 this keyword的诸多障碍。

您还可以使它成为可在整个应用程序中使用的可重用组件。


function BackButton({ children }) {
  let history = useHistory()
  return (
    <button type="button" onClick={() => history.goBack()}>
      {children}
    </button>
  )
}```
Cheers.

Answer 5

与React Router v4和dom树中任何地方的功能组件一起使用。

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

const GoBack = ({ history }) => <img src="./images/back.png" onClick={() => history.goBack()} alt="Go back" />;

export default withRouter(GoBack);

Answer 6

如果使用 react hooks 就这样做：

import { useHistory } from "react-router-dom";
const history = useHistory();
history.go(-1);

Answer 7

尝试：

this.props.router.goBack()

Answer 8

这里的每个答案都有全部解决方案的一部分。这是我用来使它能够在比使用Route更深的组件内部工作的完整解决方案：

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

^您需要第二行来导入功能并导出页面底部的组件。

render() {
  return (
  ...
    <div onClick={() => this.props.history.goBack()}>GO BACK</div>
  )
}

^需要箭头功能而不是onClick = {this.props.history.goBack（）}

export default withRouter(MyPage)

^用'withRouter（）'包装您的组件名称

Answer 9

希望这会帮助某人：

import React from 'react';
import * as History from 'history';
import { withRouter } from 'react-router-dom';

interface Props {
  history: History;
}

@withRouter
export default class YourComponent extends React.PureComponent<Props> {

  private onBackClick = (event: React.MouseEvent): void => {
    const { history } = this.props;
    history.goBack();
  };

...

Answer 10

也许这可以帮助某人。

我正在使用history.replace()进行重定向，因此当我尝试使用history.goBack()时，我被发送到上一页之前的上一页。因此，我将方法history.replace()更改为history.push()，以便可以保存历史记录，并且可以返回。

Answer 11

我不确定是否有人遇到此问题或可能需要查看此问题。但是我花了大约3个小时来解决这个问题：

我想通过单击按钮来实现一个简单的goBack（）。我以为自己开了一个好头，因为我的App.js已经包装在路由器中，并且我正在从“ react-router-dom”导入{BrowserRouter as Router}； ...由于Router元素允许我评估历史对象。

例如：

import React from 'react';
import './App.css';
import Splash from './components/Splash';
import Header from './components/Header.js';
import Footer from './components/Footer';
import Info from './components/Info';
import Timer from './components/Timer';
import Options from './components/Options';
import { BrowserRouter as Router, Route } from 'react-router-dom';
function App() {
  return (
    <Router>
      <Header />
      <Route path='/' component={Splash} exact />
      <Route path='/home' component={Info} exact />
      <Route path='/timer' component={Timer} exact />
      <Route path='/options' component={Options} exact />
      <Footer />
    </Router>
  );
}
export default App;

但是问题出在我的Nav（子组件）模块上，我必须从“ react-router-dom”中导入{withRouter}；” 然后使用以下命令强制导出

：

export default withRouter(Nav);

例如：

import React from 'react';
import { withRouter } from 'react-router-dom';
class Nav extends React.Component {
    render() {
        return (
            <div>
                <label htmlFor='back'></label>
                <button id='back' onClick={ () => this.props.history.goBack() }>Back</button>
                <label htmlFor='logOut'></label>
                <button id='logOut' ><a href='./'>Log-Out</a>            
</button>
            </div>
        );
    }
}
export default withRouter(Nav);

总而言之，withRouter是由于React中的一个已知问题而创建的，在某些情况下，在某些情况下，当拒绝从路由器继承时，必须进行强制导出。

Answer 12

您可以在函数组件中使用 history.goBack()。就这样。

import { useHistory } from 'react-router';
const component = () => { 
  const history = useHistory();

  return (
   <button onClick={() => history.goBack()}>Previous</button>
  )
}

Answer 13

只需使用

<span onClick={() => this.props.history.goBack()}>Back</span>

react-router（v4）怎么回去？

13 个答案: