react-router (v4) how to go back?

试图找出如何才能回到上一页。我使用 [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’)

  1. this.context.router.goBack();

给出错误:

TypeError: null 不是一个对象(计算‘ this. context’)

  1. 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;
222524 次浏览
小开

试试:

this.props.router.goBack()
小开

您能提供使用 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

小开
最佳答案

我认为问题在于约束力:

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>

As I have assumed before you posted the code:

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

更新:

现在我们有了 Hook，所以我们可以通过使用 使用历史轻松地完成

const history = useHistory()


const goBack = () => {
history.goBack()
}


return (
<button type="button" onClick={goBack}>
Go back
</button>
);

原文:

this.props.history.goBack();

这是反应路由器 v4的正确解决方案

但你要记住一件事，你要确保这个道具历史真的存在。

这意味着您需要在 < Route/> 包装的组件中调用这个函数 this.props.history.goBack();

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

编辑:

如果您希望在组件树中更深层的组件中包含历史对象(该组件树没有被 < Route > 包装) ，您可以执行以下操作:

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


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


export default withRouter(Demo);
小开

Simply use

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

For use with React Router v4 and a functional component anywhere in the dom-tree.

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);
小开

这里的每个答案都包含整个解决方案的一部分。下面是一个完整的解决方案，我用它来使组件内部的工作比使用 Route 的地方更加深入:

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

^ 需要第二行来导入函数并导出页面底部的组件。

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

^ 需要箭头函数 vs 简单的 onClick = { this.pros.history y.goBack ()}

export default withRouter(MyPage)

^ 将组件名称用‘ withRouter ()’包装起来

小开

以下是您可以处理这个问题的最干净和最简单的方法，它也消除了 this keyword可能存在的缺陷。使用功能组件:

import { withRouter } from "react-router-dom"; 用 withRouter() HOC包裹你的 component或更好的 App.js，这使得 history可以“应用程序范围”使用。包装您的组件只使 history available for that specific 组件“’你的选择。

所以你有:

  1. export default withRouter(App);

  2. 在 Redux 环境 export default withRouter( connect(mapStateToProps, { <!-- your action creators -->})(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 is only exported from the latest v5.1 react-router-dom so be sure to update the package. However, you should not have to worry. 关于 this keyword的许多障碍。

你也可以让它成为一个跨应用程序使用的可重用组件。


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

希望这对某些人有所帮助:

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();
};


...
小开

也许这能帮到别人。

我正在使用 history.replace()重定向，所以当我尝试使用 history.goBack()时，我被发送到前一个页面之前，我正在处理的页面。 所以我改变了方法 history.replace()到 history.push()，这样历史可以保存，我可以回去。

小开

我不确定是否有其他人遇到这个问题或者可能需要看到这个。但我花了大约3个小时试图解决这个问题:

我想在单击按钮时实现一个简单的 goBack ()。我认为我已经有了一个好的开始，因为我的 App.js 已经被包装在路由器中了，而且我正在从“ response-Router-dom”导入{ BrowserRouter as 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;

但问题出在我的导航(一个子组件)模块上, 我不得不从“反应路由器域”导入{ 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 中的一个已知问题，在某些情况下，当路由器的继承被拒绝时，强制导出是必要的。

小开

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

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


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

如果使用反应挂钩，只要做:

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

UPDATE 2022 w V6

navigate(-1)

从历史中删除当前页面:

navigate(-1, { replace: true })

提交答案