React-Router Hooks: A Brief Introduction
Tags: reactrouter, hooks, javascript, react
Published: 2020-05-24 21:40:09

---
title: React-Router Hooks: A Brief Introduction
published: true
description: A short introductions to the hooks included in React-Router v5.1
tags: react-router, hooks, javascript, react
---

React-Router, a popular declarative routing library for React, [recently released hooks as part of their API](https://reacttraining.com/blog/react-router-v5-1/). I came across one of these hooks as part of my work, and I thought it would be interesting to dig into them a little bit more.

This article provides a very basic overview of the four hooks that were included with React Router v5.1. This is by no means a comprehensive article, but my goal is to provide information to help you decide whether it would be worth trying to implement these hooks in your app.

Four hooks were introduced with this release - `useParams`, `useHistory`, `useLocation`, and `useRouteMatch`.

### `useParams`
This hook is intended for use in any situation where you would have used `match.params`. For example, if you're looking to get the id in the url `www.mysite.com/page/:id`, here's how your code could change:

Old Code: 
```jsx
const { id } = props.match.params;
```
New Code:
```jsx
const { id } = useParams();
```

While the cleaner-looking code would be enough of a reason for me to use it, `useParams` actually has one even bigger advantage - it allows you to access params anywhere in the component tree without explicitly passing them down. For example, if you have `ComponentA` which calls `ComponentB`, here's how your code might change:

Old Code:
```jsx
// Component A:
const ComponentA = (props) => {
  const { id } = props.match.params;
  return <ComponentB id={id} />;
}
export const RoutedComponentA = withRouter(ComponentA);

// Component B:
const ComponentB = (props) => (<div>My ID is: {props.id}</div>);
```
New Code:
```jsx
const ComponentA = () => {
  return <ComponentB />;
}

// Component B:
const ComponentB = () => {
  const { id } = useParams();
  return (<div>My ID is: {id}</div>);
}
```

I'm always appreciative of an opportunity to not pass down props, so I anticipate using `useParams` quite a bit in the future.

### `useHistory`
This hook provides access to the history object. `useHistory` is not intended as a long term solution - it will eventually be replaced by another hook called `useNavigation` - but it was included in this release to make it easier for teams to move away from `withRouter`.

This would be used in the same way as you would use `props.history`. For example, if you want to make a button that redirects the user to the home page any time they click it:
```jsx
const BackButton = () => {
  const history = useHistory();
  return (<button onClick={() => history.push('/home')}>Paradise City</button>);
}
```
Any action that can be performed with the history API can also be performed with the history object returned from `useHistory()`.

### `useLocation`
This hook provides access to the location object, which is useful for any component that needs to know the current URL. 
For example, if your app has several "FAQ" pages and you want to navigate to the FAQ page for your current location, here's how your code might change:

Old Code:
```js
const LinkToFaqComponent = (props) => {
  return (
    <Link to=`${props.location.pathname}/faq`>
      Read Our FAQ Here!
    </Link>
  )
}

export const LinkToFaq = withRouter(LinkToFaqComponent)
```
New Code: 
```jsx
export const LinkToFaq = () => {
  const location = useLocation();
  return (
    <Link to=`${location.pathname}/faq`>
      Read Our FAQ Here!
    </Link>
  )
}
```

The difference in this example isn't that large, but the more complex your location-related logic is, the more you will see a difference with the use of the `useLocation` hook.

### `useRouteMatch`
This hook is used when you just want route match data without actually having to render the route. I haven't seen this hook used in action, so I'll direct you to the [official documentation](https://reacttraining.com/react-router/web/api/Hooks/useroutematch) for an example of its use for this purpose.

### Takeaways
Seeing React-Router introduce hooks is a great thing, but it doesn't mean that everyone should rush to put these hooks in all of your apps right now. `withRouter` is still supported and will continue to be supported in React Router v6 (whenever that comes). If your app isn't designed in a way that you can easily convert to using hooks, that may be a good use case for continuing to use `withRouter`.

That said ... if you're creating a new functional component (or you're refactoring a class component that can easily be converted into a functional component) and you need access to route props, this would be a great opportunity to start using these new hooks. Hooks are the future of React and several other libraries that are popular in React applications (including react-redux and react-router), so the more you make hooks part of your regular development, the easier it will be to adapt to future changes.