react-router（v4）戻る方法は？

Question 1

前のページに戻るにはどうすればよいかを理解しようとしています。使ってます[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;

Question 2

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

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
}

Question 3

this.props.history.goBack();

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

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

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

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

編集：

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

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

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

export default withRouter(Demo);

Question 4

React Routerv4および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);

Question 5

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

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（）」でラップします

Question 6

使用するコードを提供できますか 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

Question 7

これは、この問題を処理するための最もクリーンで簡単な方法ですthis keyword。これにより、の考えられる落とし穴も無効になります。機能コンポーネントを使用する：

import { withRouter } from "react-router-dom";これであなたcomponent以上をラップするApp.jsと、「アプリ全体」で利用できるようになります。コンポーネントをラップすると、withRouter() HOChistoryhistory 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;

GottchauseHistoryは最新のv5.1からのみエクスポートされるreact-router-domため、必ずパッケージを更新してください。ただし、心配する必要はありません。の多くの障害についてthis keyword。

これを再利用可能なコンポーネントにして、アプリ全体で使用することもできます。


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

Question 8

試してみてください：

this.props.router.goBack()

Question 9

単に使用する

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

Question 10

これが誰かを助けることを願っています：

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

...

Question 11

多分これは誰かを助けることができます。

history.replace()リダイレクトに使用していたので、を使用しようとするとhistory.goBack()、作業しているページの前に前のページに送信されました。そこで、メソッドhistory.replace()をに変更しhistory.push()て、履歴を保存し、戻ることができるようにしました。

Question 12

他の誰かがこの問題に遭遇したのか、それともこれを見る必要があるのかはわかりません。しかし、私はこの問題を解決するために約3時間を費やしました。

ボタンをクリックするだけで簡単なgoBack（）を実装したかったのです。App.jsがすでにルーターにラップされていて、「react-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;

しかし、問題は私の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の既知の問題のために作成されました。

Question 13

history.goBack()機能コンポーネントで使用できます。ちょうどこのような。

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

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