[解決済み] react-router (v4) どうしたら戻れるのか?
2022-08-24 21:59:10
質問
前のページに戻るにはどうしたらいいのでしょうか?私は使用しています
[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">< Back</Button>
</div>
<div className="navigationButtonsRight">
<Button onClick={this.handleNext} bsStyle="success">Next ></Button>
</div>
</div>
);
}
export default Page1;
どのように解決するのですか?
バインディングの問題だと思います。
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
}
関連
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] GUID / UUIDの作成方法
-
[解決済み] Reactルータを使ったプログラムによるナビゲーション
-
[解決済み】別のウェブページにリダイレクトするにはどうすればいいですか?
-
[解決済み】JavaScriptで文字列の出現箇所をすべて置換する方法
-
[解決済み] jqueryでdivの要素がオーバーフローしていないかチェックする
-
[解決済み] react-routerのハッシュフラグメントからクエリパラメータを取得する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Google maps API V3 - 同一地点に複数のマーカーを設置する。
-
[解決済み] ExtJS 4のイベントハンドリングについて
-
[解決済み] Angularjs - 現在の日付を表示する
-
[解決済み] なぜ "use strict "はパフォーマンスを10倍向上させるのか?
-
[解決済み] CORS OriginヘッダーとCSRFトークンによるCSRF保護
-
[解決済み] 無効になっている入力フィールドの値を送信する
-
[解決済み] Javascriptで動的に命名されたメソッドを呼び出すにはどうすればよいですか?
-
[解決済み] javascriptで文字列から関数を作成する方法はありますか?
-
[解決済み] Promise : then vs then + catch [重複].
-
[解決済み] JSHintの'+'前の改行不良の説明