Sentry Answers>React>

Programmatic navigation using React Router

Programmatic navigation using React Router

Naveera A.

The Problem

When using React Router you get access to the Link component, which allows you to navigate within a single-page application without reloading the app.

But how can you implement programmatic or imperative navigation?

Let’s say you have a form. When the user clicks on the submit button, you want to submit the form and then navigate the user to another page.

You can’t substitute the submit button with the Link component because you want the button to submit the form first.

How can you implement this behavior using React Router?

The Solution

React Router ships with a hook to let you trigger navigation programmatically.

The hook is different depending on which version of React Router you are using.

React Router v6

In React Router v6, you can use the useNavigate hook. It returns a function that lets you navigate programmatically.

Click to Copy
import { useNavigate } from "react-router-dom"; function App() { const navigate = useNavigate(); function handleClick() { // Handle form submission behaviour. // Then trigger navigation. navigate("/home"); } return ( <div> <h2>Click this button</h2> <button onClick={handleClick}>Submit</button> </div> ); }

This function can take up to two arguments:

The first argument is required. You can think of it as the navigate-to link. It can be a route, as in the example above, or a number, like navigate(-2) to go back two pages in browser history.

The second argument is optional. It lets you provide additional information.

For example, to prevent users from returning to the current page using the browser’s back button, you can use {replace: true} as the second argument:

Click to Copy
const navigate = useNavigate(); function handleClick() { navigate("/home", { replace: true }); }

If you need the state, you can do so by adding {state: state} as the second argument:

Click to Copy
const navigate = useNavigate(); function handleClick() { navigate("/home", { state: state }); }

You can read more about this hook in the official documentation.

React Router v5

If you are using React Router v5, you can use the useHistory hook. This hook gives you access to the history object.

The history object has many properties and methods that let you navigate programmatically.

For example:

Click to Copy
import { useHistory } from "react-router-dom"; function App() { const history = useHistory(); function handleClick() { // Handle form submission behaviour. // Then trigger navigation. history.push("/home"); } return ( <div> <button onClick={handleClick}>go home</button> </div> ); }

You can read about other methods and properties in the official documentation.

  • Sentry BlogHow to identify fetch waterfalls in React
  • Syntax.fmReact Server Components
  • Syntax.fmWhy the jQuery Creator Uses React and Typescript
  • Syntax.fmListen to the Syntax Podcast
  • Sentry BlogReact Native Debugging and Error Tracking During App Development
  • Syntax.fmDiscussion on building native iOS and Android apps with React Native
  • SentryReact Error & Performance Monitoring
  • Sentry BlogFixing memoization-breaking re-renders in React
  • Syntax.fm logo
    Listen to the Syntax Podcast

    Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.

    SEE EPISODES

Considered “not bad” by 4 million developers and more than 100,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.