How to navigate programmatically in React Router

In this tutorial, we are going to learn about how to navigate programmatically in React Router by using the useHistory( ) hook.

useHistory() Hook

React router offers us the useHistory() hook by using that we can navigate a user programmatically from one route to another route in functional components.

Example:

import React from 'react';
import { useHistory } from "react-router-dom";
function HomeButton() {
  const history = useHistory();

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

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

In the above example, we first imported the useHistory() hook from the react-router-dom package then we initialized the useHistory() inside the HomeButton component.

The useHistory() hook has push method which accepts route as a first argument, so that we passed /home route to the push() method inside a handleClick() function.

Now, if we click on a Go to home button user will programmatically navigate to /home route.

If you want to navigate programmatically inside class-based components the push() method is available in this.props property.

Example:

import React,{Component} from 'react';

class App extends Component{
  gotoHome = () => {
    this.props.history.push('/')  }

  render() {
    return (
      <div>
        <button onClick={this.gotoHome}>Home</button>      </div>
    )
  }
}

export default App;