Detect Route Change with react-router

Question

I have to implement some business logic depending on browsing history   What I want to do is something like this   reactRouter onUrlChange url   gt       this history push url         Is there any way to receive a callback from react-router when the URL gets updated

User · Answer

I came across this question as I was attempting to focus the ChromeVox screen reader to the top of the "screen" after navigating to a new screen in a React single page app. Basically trying to emulate what would happen if this page was loaded by following a link to a new server-rendered web page.

This solution doesn't require any listeners, it uses withRouter() and the componentDidUpdate() lifecycle method to trigger a click to focus ChromeVox on the desired element when navigating to a new url path.

Implementation

I created a "Screen" component which is wrapped around the react-router switch tag which contains all the apps screens.

<Screen>
  <Switch>
    ... add <Route> for each screen here...
  </Switch>
</Screen>

`Screen.tsx` Component

Note: This component uses React + TypeScript

import React from 'react'
import { RouteComponentProps, withRouter } from 'react-router'

class Screen extends React.Component<RouteComponentProps> {
  public screen = React.createRef<HTMLDivElement>()
  public componentDidUpdate = (prevProps: RouteComponentProps) => {
    if (this.props.location.pathname !== prevProps.location.pathname) {
      // Hack: setTimeout delays click until end of current
      // event loop to ensure new screen has mounted.
      window.setTimeout(() => {
        this.screen.current!.click()
      }, 0)
    }
  }
  public render() {
    return <div ref={this.screen}>{this.props.children}</div>
  }
}

export default withRouter(Screen)

I had tried using focus() instead of click(), but click causes ChromeVox to stop reading whatever it is currently reading and start again where I tell it to start.

Advanced note: In this solution, the navigation <nav> which inside the Screen component and rendered after the <main> content is visually positioned above the main using css order: -1;. So in pseudo code:

<Screen style={{ display: 'flex' }}>
  <main>
  <nav style={{ order: -1 }}>
<Screen>

If you have any thoughts, comments, or tips about this solution, please add a comment.

User · Answer

Update for React Router 5 1   import React from  react   import   useLocation  Switch   from  react-router-dom     const App        gt      const location   useLocation       React useEffect      gt        console log  Location changed          location       return        lt Switch gt            Routes go here          lt  Switch gt

User · Answer

If you want to listen to the history object globally  you ll have to create it yourself and pass it to the Router  Then you can listen to it with its listen   method      Use Router from react-router  not BrowserRouter  import   Router   from  react-router       Create history object  import createHistory from  history createBrowserHistory   const history   createHistory        Listen to history changes     You can unlisten by calling the constant   unlisten      const unlisten   history listen  location  action    gt      console log action  location pathname  location state           Pass history to Router   lt Router history  history  gt          lt  Router gt    Even better if you create the history object as a module  so you can easily import it anywhere you may need it  e g  import history from    history

User · Answer

react-router v6  In the upcoming v6  this can be done by combining the useLocation and useEffect hooks  import   useLocation   from  react-router-dom    const MyComponent        gt      const location   useLocation      React useEffect      gt           runs on location  i e  route  change     console log  handle route change here   location        location             For convenient reuse  you can do this in a custom useLocationChange hook     runs action location  on location  i e  route  change const useLocationChange    action    gt      const location   useLocation     React useEffect      gt    action location      location      const MyComponent1        gt      useLocationChange  location    gt         console log  handle route change here   location                 const MyComponent2        gt      useLocationChange  location    gt         console log  and also here   location                  If you also need to see the previous route on change  you can combine with a usePrevious hook  const usePrevious value      const ref   React useRef     React useEffect      gt    ref current   value       return ref current    const useLocationChange    action    gt      const location   useLocation     const prevLocation   usePrevious location    React useEffect      gt         action location  prevLocation         location      const MyComponent1        gt      useLocationChange  location  prevLocation    gt         console log  changed from   prevLocation   to   location                  It s important to note that all the above fire on the first client route being mounted  as well as subsequent changes  If that s a problem  use the latter example and check that a prevLocation exists before doing anything

User · Answer

This is an old question and I don t quite understand the business need of listening for route changes to push a route change  seems roundabout   BUT if you ended up here because all you wanted was to update the  page path  on a react-router route change for google analytics   global site tag   something similar  here s a hook you can now use  I wrote it based on the accepted answer   useTracking js  import   useEffect   from  react  import   useHistory   from  react-router-dom   export const useTracking    trackingId    gt      const   listen     useHistory      useEffect      gt        const unlisten   listen  location    gt             if you pasted the google snippet on your index html          you ve declared this function in the global       if   window gtag  return        window gtag  config   trackingId    page path  location pathname                   remember  hooks that add listeners        should have cleanup to remove them     return unlisten       trackingId  listen       You should use this hook once in your app  somewhere near the top but still inside a router  I have it on an App js that looks like this   App js  import   as React from  react  import   BrowserRouter  Route  Switch   from  react-router-dom   import Home from    Home Home  import About from    About About     this is the file above import   useTracking   from    useTracking   export const App        gt      useTracking  UA-USE-YOURS-HERE      return        lt Switch gt         lt Route path   about  gt           lt About   gt         lt  Route gt         lt Route path     gt           lt Home   gt         lt  Route gt       lt  Switch gt            I find it handy to have a named export of the App    and then the default export which wraps it with    all the providers I need     Mostly for testing purposes  but in this case     it allows us to use the hook above     since you may only use it when inside a Router export default      gt       lt BrowserRouter gt       lt App   gt     lt  BrowserRouter gt

User · Answer

You can make use of history listen   function when trying to detect the route change  Considering you are using react-router v4  wrap your component with withRouter HOC to get access to the history prop  history listen   returns an unlisten function  You d use this to unregister from listening  You can configure your routes like index js ReactDOM render         lt BrowserRouter gt               lt AppContainer gt                      lt Route exact path  quot   quot  Component         gt                      lt Route exact path  quot  Home quot  Component         gt              lt  AppContainer gt           lt  BrowserRouter gt     document getElementById  root       and then in AppContainer js class App extends Component        componentWillMount         this unlisten   this props history listen  location  action    gt          console log  quot on route change quot                  componentWillUnmount           this unlisten          render          return             lt div gt  this props children  lt  div gt                 export default withRouter App    From the history docs   You can listen for changes to the current location using history listen  history listen  location  action    gt          console log  The current URL is   location pathname   location search   location hash      console log  The last navigation action was   action        The location object implements a subset of the window location interface  including    location pathname   - The path of the URL   location search   - The URL query string   location hash   - The URL hash fragment  Locations may also have the following properties  location state - Some extra state for this location that does not reside in the URL  supported in createBrowserHistory and createMemoryHistory  location key - A unique string representing this location  supported in createBrowserHistory and createMemoryHistory  The action is one of PUSH  REPLACE  or POP depending on how the user got to the current URL   When you are using react-router v3 you can make use of history listen   from history package as mentioned above or you can also make use browserHistory listen   You can configure and use your routes like import  browserHistory  from  react-router    class App extends React Component        componentDidMount               this unlisten   browserHistory listen  location   gt                     console log  route changes                                                     componentWillUnmount             this unlisten                    render             return                   lt Route path  quot   quot  onChange  yourHandler  component  AppContainer  gt                      lt IndexRoute component  StaticContainer     gt                      lt Route path  quot  a quot  component  ContainerA     gt                      lt Route path  quot  b quot  component  ContainerB     gt               lt  Route gt

User · Answer

import React from  react   import   BrowserRouter as Router  Switch  Route   from  react-router-dom   import Sidebar from    Sidebar   import Chat from    Chat     lt Router gt       lt Sidebar   gt           lt Switch gt               lt Route path  quot  rooms  roomId quot  component  Chat  gt               lt  Route gt           lt  Switch gt   lt  Router gt    import   useHistory   from  react-router-dom   function SidebarChat props          const history   useHistory          var openChat   function  id                To navigate           history push  quot  rooms  quot    id                 To Detect the navigation change or param change   import   useParams   from  react-router-dom   function Chat props        var   roomId     useParams        var roomId   props match params roomId       useEffect      gt             Detect the paramter change         roomId        useEffect      gt             Detect the location url change         location

User · Answer

React Router V5  If you want the pathName as a string      or  users    you can use the following        React Hooks  React Router DOM   let history   useHistory      const location   useLocation      const pathName   location pathname

[reactjs] Detect Route Change with react-router

Implementation

`Screen.tsx` Component

Examples related to reactjs

Examples related to react-router

Examples related to react-router-v4

Examples related to react-router-redux

Examples related to react-router-dom

[reactjs] Detect Route Change with react-router

Implementation

Screen.tsx Component

Examples related to reactjs

Examples related to react-router

Examples related to react-router-v4

Examples related to react-router-redux

Examples related to react-router-dom

`Screen.tsx` Component