1. ホーム
  2. javascript

[解決済み] 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})
      }
    }
  }

皆さんありがとうございました(^^)