How to listen to route changes in react router v4

Question

I have a couple of buttons that acts as routes  Everytime the route is changed  I want to make sure the button that is active changes   Is there a way to listen to route changes in react router v4

User · Answer

I just dealt with this problem  so I ll add my solution as a supplement on other answers given  The problem here is that useEffect doesn t really work as you would want it to  since the call only gets triggered after the first render so there is an unwanted delay  If you use some state manager like redux  chances are that you will get a flicker on the screen because of lingering state in the store  What you really want is to use useLayoutEffect since this gets triggered immediately  So I wrote a small utility function that I put in the same directory as my router  export const callApis    fn  path    gt        useLayoutEffect      gt          fn            path        Which I call from within the component HOC like this  callApis      gt  getTopicById  topicId    path    path is the prop that gets passed in the match object when using withRouter  I m not really in favour of listening   unlistening manually on history  That s just imo

User · Answer

I use withRouter to get the location prop  When the component is updated because of a new route  I check if the value changed    withRouter class App extends React Component      static propTypes         location  React PropTypes object isRequired                  componentDidUpdate prevProps        if  this props location     prevProps location          this onRouteChanged                 onRouteChanged         console log  ROUTE CHANGED                    render        return  lt Switch gt           lt Route path     exact component  HomePage    gt           lt Route path   checkout  component  CheckoutPage    gt           lt Route path   success  component  SuccessPage    gt                          lt Route component  NotFound    gt         lt  Switch gt          Hope it helps

User · Answer

To expand on the above  you will need to get at the history object  If you are using BrowserRouter  you can import withRouter and wrap your component with a higher-order component  HoC  in order to have access via props to the history object s properties and functions   import   withRouter   from  react-router-dom    const myComponent      history      gt         history listen  location  action    gt               location is an object like window location         console log action  location pathname  location state               return  lt div gt     lt  div gt       export default withRouter myComponent     The only thing to be aware of is that withRouter and most other ways to access the history seem to pollute the props as they de-structure the object into it

User · Answer

import   useHistory   from  react-router-dom    const Scroll        gt      const history   useHistory       useEffect      gt        window scrollTo 0  0         history location pathname       return null

User · Answer

You should to use history v4 lib   Example from there  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

User · Answer

withRouter  history listen  and useEffect  React Hooks  works quite nicely together   import React    useEffect   from  react  import   withRouter   from  react-router-dom   const Component      history      gt        useEffect      gt  history listen      gt               do something on route change            for my example  close a drawer                           export default withRouter Component    The listener callback will fire any time a route is changed  and the return for history listen is a shutdown handler that plays nicely with useEffect

User · Answer

v5 1 introduces the useful hook useLocation  https   reacttraining com blog react-router-v5-1  uselocation  import   Switch  useLocation   from  react-router-dom   function usePageViews       let location   useLocation      useEffect           gt          ga send   pageview   location pathname               location         function App       usePageViews     return  lt Switch gt     your routes here     lt  Switch gt

User · Answer

import React    useEffect   from  react   import   useLocation   from  react-router    function MyApp        const location   useLocation       useEffect      gt          console log  route has been changed             your code      location pathname         with hooks

User · Answer

With the useEffect hook it s possible to detect route changes without adding a listener   import React    useEffect             from  react   import   Switch  Route  withRouter    from  react-router-dom   import Main                           from    Main   import Blog                           from    Blog     const App      history     gt         useEffect       gt                When route changes  history location pathname changes as well            And the code will execute after this line          history location pathname         return   lt Switch gt                 lt Route exact path           component    Main   gt                 lt Route exact path     blog  component    Blog   gt               lt  Switch gt        export default withRouter App

User · Answer

For functional components try useEffect with props location  import React   useEffect  from  react    const SampleComponent    props    gt           useEffect      gt            console log props location             props location        export default SampleComponent

User · Answer

With react Hooks  I am using useEffect    const history   useHistory     const queryString   require  query-string     const parsed   queryString parse location search    const  search  setSearch    useState parsed search   parsed search          useEffect      gt        const parsedSearch   parsed search   parsed search          if  parsedSearch     search             do some action  The route Changed              location search

User · Answer

In some cases you might use render attribute instead of component  in this way   class App extends React Component        constructor  props            super props              onRouteChange  pageId            console log pageId              render              return   lt Switch gt                       lt Route path     exact render   props    gt                             this onRouteChange  home                            return  lt HomePage     props    gt                            gt                       lt Route path   checkout  exact render   props    gt                             this onRouteChange  checkout                            return  lt CheckoutPage     props    gt                            gt                   lt  Switch gt            Notice that if you change state in onRouteChange method  this could cause  Maximum update depth exceeded  error

User · Answer

With hooks   import   useEffect   from  react  import   withRouter   from  react-router-dom  import   history as historyShape   from  react-router-prop-types   const DebugHistory      history      gt      useEffect      gt        console log   gt  Router   history action  history location         history location key      return null    DebugHistory propTypes     history  historyShape    export default withRouter DebugHistory      Import and render as  lt DebugHistory gt  component

[react-router-v4] How to listen to route changes in react router v4?

Examples related to react-router-v4