[解決済み] React-Routerでブラウザの戻るボタンを操作する?
2023-08-07 06:33:49
質問
Material-uiのTabを制御して使っているのですが、このように(React-router)Linkに使っています。
<Tab value={0} label="dashboard" containerElement={<Link to="/dashboard/home"/>}/>
<Tab value={1} label="users" containerElement={<Link to="/dashboard/users"/>} />
<Tab value={2} label="data" containerElement={<Link to="/dashboard/data"/>} />
現在dashboard/dataにアクセスしているときに、ブラウザの戻るボタンをクリックした場合 dashboard/usersに移動しますが、ハイライトされたタブはまだdashboard/data (value=2) に留まります。
状態を設定することで変更できますが、ブラウザの戻るボタンが押されたときのイベントを処理する方法がわかりません?
こんなのがありました。
window.onpopstate = this.onBackButtonEvent;
が、これは状態が変化するたびに呼び出されます(バックボタンイベントのときだけではありません)。
どのように解決するのですか?
結局どうすればいいのでしょうか?
componentDidMount() {
this._isMounted = true;
window.onpopstate = ()=> {
if(this._isMounted) {
const { hash } = location;
if(hash.indexOf('home')>-1 && this.state.value!==0)
this.setState({value: 0})
if(hash.indexOf('users')>-1 && this.state.value!==1)
this.setState({value: 1})
if(hash.indexOf('data')>-1 && this.state.value!==2)
this.setState({value: 2})
}
}
}
皆さんありがとうございました(^^)
関連
-
[解決済み] Reactルータを使ったプログラムによるナビゲーション
-
[解決済み] React-routerのURLを更新したり、手動で書き込んだりするとうまくいかない
-
[解決済み] React Router v4で履歴にプッシュする方法は?
-
[解決済み] react-router - ハンドラコンポーネントにpropsを渡す
-
[解決済み] React Router v4 - 現在のルートを取得する方法は?
-
[解決済み】オプションのパスパラメータを持つReact Router
-
[解決済み】react router v4 / v5でネストされたルート
-
[解決済み] Google maps API V3 - 同一地点に複数のマーカーを設置する。
-
[解決済み] WebStormで未解決の変数が大量にある場合の警告に対処する方法は?
-
[解決済み] ECMAScriptとは?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] AngularJSのエラーです。Cross Origin リクエストはプロトコルスキーム http, data, chrome-extension, https に対してのみサポートされています。
-
[解決済み] JavaScriptで次の要素/前の要素を取得しますか?
-
[解決済み] Google maps API V3 - 同一地点に複数のマーカーを設置する。
-
[解決済み] 文字列がすべて同じ部分文字列で構成されているかどうかを調べるにはどうすればよいですか?
-
[解決済み] モバイルWeb HTML5フレームワークの選び方【終了しました
-
[解決済み] moment.jsでミュータビリティを回避するには?
-
[解決済み] ECMAScriptとは?
-
[解決済み] モデルフェッチ時に1をtrueに、0をfalseに変換する方法
-
[解決済み] CORS: 認証モードは 'include' です。
-
[解決済み] JavaScriptでDIVを表示・非表示にするには?