web-dev-qa-db-ja.com

反応ルーター（v4）戻る方法？

前のページに戻る方法を理解しようとしています。 [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;
javascriptreactjsreact-router-v4
37
Akshay Lokur

問題はバインディングにあると思います：

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
}
60
Vivek Doshi
this.props.history.goBack();

これは、react-router v4の正しいソリューションです

ただし、留意すべきことの1つは、this.props.historyが存在することを確認する必要があるということです。

つまり、<Route />でラップされたコンポーネント内でこの関数this.props.history.goBack();を呼び出す必要があります。

コンポーネントツリーのより深いコンポーネントでこの関数を呼び出すと、機能しません。

EDIT：

コンポーネントツリーのより深いコンポーネント（<Route>でラップされていない）に履歴オブジェクトを保持する場合は、次のように実行できます。

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

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

export default withRouter(Demo);
11
Hoang Trinh

React Router v4および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);
5
frippera

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

4
Alfredo Re

ここの各回答には、ソリューション全体の一部が含まれています。ルートを使用した場所よりも深いコンポーネント内で動作させるために使用した完全なソリューションは次のとおりです。

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

^関数をインポートし、ページの下部でコンポーネントをエクスポートするには、2行目が必要です。

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

^矢印関数と単にonClick = {this.props.history.goBack（）}が必要

export default withRouter(MyPage)

^コンポーネントの名前を「withRouter（）」でラップします

1
foureyedraven

試してください：

this.props.router.goBack()
0
Rodius