reactjs - Detect Route Change with react-router -

i have implement business logic depending on browsing history.

what want this:

reactrouter.onurlchange(url => {    this.history.push(url); }); 

is there way receive callback react-router when url gets updated?

you can make use of history.listen() function when trying detect route change. considering using react-router v4, wrap component withrouter hoc access history prop.

history.listen() returns unlisten function. you'd use unregister listening.

you can configure routes like

index.js

reactdom.render(       <browserrouter>             <appcontainer>                    <route exact path="/" component={...} />                    <route exact path="/home" component={...} />            </appcontainer>         </browserrouter>,   document.getelementbyid('root') ); 

and in 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); 

from history docs:

you can listen changes current location using history.listen:

history.listen((location, action) => {       console.log(`the current url ${location.pathname}${location.search}${location.hash}`)   console.log(`the last navigation action ${action}`) }) 

the location object implements subset of window.location interface, including:

**location.pathname** - path of url **location.search** - url query string **location.hash** - url hash fragment 

locations may have following properties:

location.state - state location not reside in url (supported in createbrowserhistory , creatememoryhistory)

location.key - unique string representing location (supported in createbrowserhistory , creatememoryhistory)

the action 1 of push, replace, or pop depending on how user got current url.

when using react-router v3 can make use of history.listen() history package mentioned above or can make use browserhistory.listen()

you can configure , use routes like

import {browserhistory} '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>         )     } }