[解決済み] react-routerでルート変更を検出する

質問

閲覧履歴に応じたビジネスロジックを実装する必要があります。

やりたいことは、こんな感じです。

reactRouter.onUrlChange(url => {
   this.history.push(url);
});

URLが更新されたときにreact-routerからコールバックを受け取る方法はありますか？

解決方法は？

を使用することができます。 history.listen() という関数を使って、経路の変更を検出することができます。を使用していることを考慮すると react-router v4 でコンポーネントを囲みます。 withRouter にアクセスできるようにするためのHOC history プロパティを使用します。

history.listen() は unlisten 関数を使用します。これを利用して unregister をリスニングから削除します。

のようにルートを設定することができます。

index.js

ReactDOM.render(
      <BrowserRouter>
            <AppContainer>
                   <Route exact path="/" Component={...} />
                   <Route exact path="/Home" Component={...} />
           </AppContainer>
        </BrowserRouter>,
  document.getElementById('root')
);

で、その後に AppContainer.js

class App extends Component {
  
  componentWillMount() {
    this.unlisten = this.props.history.listen((location, action) => {
      console.log("on route change");
    });
  }
  componentWillUnmount() {
      this.unlisten();
  }
  render() {
     return (
         <div>{this.props.children}</div>
      );
  }
}
export default withRouter(App);

履歴から ドキュメント :

を使えば、現在地への変更をリッスンすることができます。 history.listen :

history.listen((location, action) => {
      console.log(`The current URL is ${location.pathname}${location.search}${location.hash}`)
  console.log(`The last navigation action was ${action}`)
})

ロケーションオブジェクトは、window.location のサブセットを実装しています。 インターフェイスを含む。

**location.pathname** - The path of the URL
**location.search** - The URL query string
**location.hash** - The URL hash fragment

また、ロケーションは以下のプロパティを持つことができる。

場所.状態 - URLに存在しない、この場所のための余分な状態(サポートされているのは createBrowserHistory と createMemoryHistory )

location.key - この場所を表す一意の文字列（サポート で createBrowserHistory と createMemoryHistory )

アクションは以下のいずれかです。 PUSH, REPLACE, or POP ユーザがどのように 現在のURLに到達した。

react-router v3 を使用している場合、以下の機能を利用することができます。 history.listen() から history パッケージを使用することもできます。 browserHistory.listen()

のようにルートを設定し、使用することができます。

import {browserHistory} from 'react-router';

class App extends React.Component {

    componentDidMount() {
          this.unlisten = browserHistory.listen( location =>  {
                console.log('route changes');
                
           });
      
    }
    componentWillUnmount() {
        this.unlisten();
     
    }
    render() {
        return (
               <Route path="/" onChange={yourHandler} component={AppContainer}>
                   <IndexRoute component={StaticContainer}  />
                   <Route path="/a" component={ContainerA}  />
                   <Route path="/b" component={ContainerB}  />
            </Route>
        )
    }
}