Programmatic Navigation with React Router

React Router is a popular library used for client-side routing in React applications. While it provides an easy-to-use Link component for navigating between routes, there are scenarios where you need to navigate programmatically. In this tutorial, we will explore how to achieve programmatic navigation with React Router.

Introduction to Programmatic Navigation

Programmatic navigation refers to the ability to change the current route or URL in your application from within your code. This can be useful when you want to redirect users after a certain action, such as form submission or when they click on a button that triggers a navigation event.

Using the useNavigate Hook (React Router v6)

In React Router version 6 and above, the recommended way to navigate programmatically is by using the useNavigate hook from react-router-dom. This hook returns a navigate function that you can use to change the current route.

import { useNavigate } from "react-router-dom";

function HomeButton() {
  const navigate = useNavigate();

  function handleClick() {
    navigate("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

Using the useHistory Hook (React Router v5)

For versions of React Router prior to version 6, you can use the useHistory hook. This hook returns a history object that contains methods for navigating.

import { useHistory } from "react-router-dom";

function HomeButton() {
  const history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

Navigating with withRouter Higher-Order Component (React Router v4)

In earlier versions of React Router, such as version 4, you can use the withRouter higher-order component to access the history object.

import { withRouter } from 'react-router-dom';

const Button = withRouter(({ history }) => (
  <button
    type='button'
    onClick={() => { history.push('/new-location') }}
  >
    Click Me!
  </button>
));

Navigating with Composition and Rendering a Route (React Router v4)

Another approach in React Router version 4 is to use composition by rendering a pathless Route. This method also provides access to the history object.

import { Route } from 'react-router-dom';

const Button = () => (
  <Route render={({ history}) => (
    <button
      type='button'
      onClick={() => { history.push('/new-location') }}
    >
      Click Me!
    </button>
  )} />
);

Best Practices

• Always use the latest version of React Router to ensure you have access to the most current and efficient navigation methods.
• Prefer using hooks (useNavigate or useHistory) over higher-order components (withRouter) for better code readability and maintainability.
• Avoid direct manipulation of the browser’s history unless absolutely necessary, as it can lead to unexpected behavior in your application.

By following these guidelines and examples, you can effectively implement programmatic navigation in your React applications using React Router.