React Router Hooks

Route Route Baby

React Router allows for client-side routing and navigation without the need for page reloading. As such it is an incredibly powerful and lightweight way to navigate around single page applications. One of React Router’s best features is its suite of web hooks which, with a bit of practice, can be effective tools in keeping navigation simple in your next React app.

Getting Started

Before we get started with any hooks we need to make sure we have the necessary npm library installed to use React Router. We can do this by typing

npm install react-router-dom

when in our project directory. Now we can use our web hooks in any component we want as long as we import the desired hooks correctly.

Let’s take a look at the 4 hooks that come with React Router.

useHistory( );

The useHistory() hook gives you access to the history instance which can be used to perform navigation from inside a component. Here is an example of a HomeButton component which will navigate us to our home path.

Notice on line 5 we define a variable history as useHistory(). This must be done in order to call .push() on it. Only then can we can pass in the path we want to go to on the button Click.

useLocation( );

The useLocation() hook returns the location object representing the current URL. This is useful in a situation where you would like to trigger a new “page view” event using your web analytics tool whenever a new page loads, as in the following example:

Notice we are again assigning a variable location as useLocation() on line 10. Now we can call location.pathname. The .pathname is a key name on the location object which looks something like this:

We can access any of these key:value pairs on the location object now. Try accessing these different values and experimenting with how they can be used in your component’s navigation flow.

useParams( );

useParams() is a React Router web hook used to return an object with key:value pairs of URL parameters. Below is an example where useParams() is being used to match the :slug value in the URL string. Our component path and details will change based on what we designate.

NOTE: useParams() cannot be used to query a URL for certain values. On a recent app I was attempting to get an auth-code value from a URL and it always came back undefined. This was because React Router cannot parse a value into useable JSON in this way. I ended up downloading an npm library that would parse this value for me.

useRouteMatch( );

The useRouteMatch() hook matches the current URL in the same way that a <Route> would. It’s mostly useful for getting access to the match data without actually rendering a <Route>.

useRouteMatch( ) may take an argument which can be either a pathname as a string or an object with the matching props that Route accepts.

Route! Route! Let It All Out!

When I was first learning about React Router it wasn’t immediately evident how powerful these built-in hooks could be. Not only are they DRY, they also cut way down on unforced errors and are scalable when it comes to later versions of your next big app. I highly encourage anyone to practice, practice, practice as they can go a long way in your code.

Happy Coding!