How to navigate programmatically in React Router

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;