Hooking into Route Changes in React Router v4

React Router v4 is coming up fast. The first beta was released this week which includes support for hooking into route changes. I needed the ability to run a couple things any time a route changed, so I came up with a simple component that runs as many things as I want when the url is updated.

A couple ideas of what to run on route changes:

• We have a referral system that needs to check if there's a certain query parameter in the url.

• setting a canonical url

• Send a page view to google analytics on every page change.

• Redirect users if they are not allowed on certain pages (ex a regular user hitting /admin)

Since the referral system came up, I decided it might be better to have a way to hook into these changes in a more general way.

Yes, I came up with this today, and yes it's a very easy thing to do!

After doing this I realized many people new to react router may be confused as to how this is done, so here's a quick guide on hooking into route changes!

Here's the component:

import { withRouter } …