Introduction to React Router Hooks

John Au-Yeung
May 20 · 4 min read
Photo by Scott Walsh on Unsplash

React Router is one of the most popular routing solutions for React for building single-page React apps.

In this article, we’ll look at the React Router hooks API to clean up our code.

useParams

The useParams hook is used for getting the router parameter from the URL parameters.

We can use this hook if we defined routes that take a URL parameter. For instance, we can write the following code to use the useParams hook:

import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import { useParams } from "react-router";
const Foo = () => {
const { id } = useParams();
return <p>{id}</p>;
};
export default function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/foo/1">Foo/1</Link>
</li>
</ul>
</nav>
<Switch>
<Route path="/foo/:id">
<Foo />
</Route>
</Switch>
</div>
</Router>
);
}

In the code above, we defined the route with the Route component with the path prop set to /foo/:id .

Then inside it, we have the Foo component. Inside the Foo component, we have the useParams hook, we get the URL parameters from the hook, where the parameter values are returned as an object with the name of the URL parameter as the name.

In our example, it would be :id . We get the value of id by the key with the destructuring syntax.

Then id is rendered in the Foo component. We then have the Link component with /foo/1 as the value of the to prop.

Then we see 1 displayed on the screen, which is the value the id URL parameter.

useLocation

We can use the useLocation prop to get the global location object in our component.

For instance, we can use this hook as follows:

import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import { useLocation } from "react-router";
const Foo = () => {
const loc = useLocation();
return <p>{JSON.stringify(loc)}</p>;
};
export default function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/foo/1">Foo/1</Link>
</li>
</ul>
</nav>
<Switch>
<Route path="/foo/:id">
<Foo />
</Route>
</Switch>
</div>
</Router>
);
}

In the code above, we used the useLocation hook in Foo to get the location object and assigned it to loc .

Then we show the stringified version to see the values inside the location object.

This hook is available since the 5.1 version of the React Router.

Photo by British Library on Unsplash

useHistory

The useHistory hook returns the history object. It lets us call the methods in the history methods like the goBack and push methods.

We can use useHistory as follows:

import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import { useHistory } from "react-router";
const Foo = () => {
const hist = useHistory();
return (
<div>
<Link to="/foo">foo</Link>
<Link to="/bar">bar</Link>
<button onClick={() => hist.goBack()}>back</button>
<p>foo</p>
</div>
);
};
const Bar = () => {
const hist = useHistory();
return (
<div>
<Link to="/foo">foo</Link>
<Link to="/bar">bar</Link>
<button onClick={() => hist.goBack()}>back</button>
<p>bar</p>
</div>
);
};
export default function App() {
return (
<Router>
<div>
<Switch>
<Route path="/foo">
<Foo />
</Route>
<Route path="/bar">
<Bar />
</Route>
</Switch>
</div>
</Router>
);
}

In the code above, we have 2 route components, Foo and Bar . In each component, we have the following callback:

() => hist.goBack()

It’s used for going back to the previous route. Each time we click the button in each page, it’ll go back to the previous page because we have the useHistory hook which returns the history object and then assign it to the hist constant.

This lets us call the methods in the history object.

Conclusion

The useParams hook is useful for getting the URL parameters for a given route as an object. This way, we can use get and use them easily to do anything we want like getting data by ID.

The useLocation hook returns the global location object so that we can use properties like href , hostname, pathname etc.

Likewise, the useHistory hook lets us get the history object in our components so that we can call methods like go , goBack , etc. within the a component.

A note from Plain English

Did you know that we have launched a YouTube channel? Every video we make will aim to teach you something new. Check us out by clicking here, and be sure to subscribe to the channel 😎

JavaScript In Plain English

New articles every day.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store