Blog / Quick-fixes

How to programmatically navigate using React Router

How to programmatically navigate using React Router

In this post find the quick and simple solution for how to programmatically navigate using React Router - Quick Fix Series!

Will MaygerWill Mayger
August 04, 2021
Article

In this quick post we will be covering how to programmatically navigate using React Router so you can solve this issue quickly and without having to look any further!

As with all my Quick Fix Series of posts, you will first find the problem described and then the solution just below.

Let’s get stuck in!

The Problem - Navigating programmatically using React Router

When you are using React Router it is a pretty common scenario that you will need to navigate programmatically between pages.

So to better describe the issue here, when I say programmatically navigating using React Router, I don’t mean via a link or button component from React Router, for example:

<Link to="/about">About</Link>

This is not classed as navigating programmatically because it is emulating what would happen if you used an anchor element in a non-react application.

Instead we want to find the equivalent for using something like window.location.href = 'https://example.com/example', or window.location.assign('https://example.com/example') that can be called from anywhere in the application by JavaScript.

So how do we do this with React Router?

How to programmatically navigate using React Router

React router provides a react hook called useHistory which returns a value that enables us to do many things, one of which is to be able to navigate programmatically to a new route. By calling .push(newUrlHere) it will then navigate us to that page as well as save it to the router history so that it can be accessible via the back button in the browser.

Here is an example of how you can use the useHistory react hook to programmatically navigate using React Router:

export default function ExampleComponent() {
  const history = useHistory()
  useEffect(() => {
    setTimeout(() => history.push("/about"), 2000)
  }, [history])

  return (
    <h1>This will automatically navigate to the about page after 2 seconds</h1>
  )
}

Summary

There we have the quick fix to how to programmatically navigate using React Router, if you want more like this be sure to check out some of my other posts!

Foxi - Budget Planner & Tracker

Foxi

Budget Planner & Tracker

More money in your pocket by the end of the month.

Free to use and no account needed.

Get started now.

Get the app

Some graphics used on this post were made using icons from flaticon.

Latest Posts

Learn React, JavaScript and TypeScript

Learn React, JavaScript and TypeScript

Join the platform that top tier companies are using.
Master the skills you need to succeed as a software engineer and take your career to the next level with Pluralsight.

Start here

Become an expert in ReactJS, TypeScript, and JavaScript.

Here you will find my personal recomendations to you, for full disclosure I earn a small commission from some of these links, but I only recommend what I trust and personally use.

Good things are coming, don't miss out!

Good things are coming, don't miss out!

Follow me on Twitter to stay up to date and learn frontend, React, JavaScript, and TypeScript tips and tricks!

Are you a novice, intermediate or expert react engineer?

Find out here by taking my fun, interactive, quick quiz which takes approximately 1 - 3 minutes. How well will you will do?

Foxi - Budget Planner & Tracker

Foxi

Budget Planner & Tracker

More money in your pocket by the end of the month.

Free to use and no account needed.

Get started now.

Get the app