Programmatically Navigate Using React Router

In this article, we will learn how to programmatically navigate using React Router. Programmatic navigation enables changing the URL of an application without reloading the page. We can use several approaches to programmatically navigate in a React application using React Router.

Approaches to navigate using React Router

To programmatically navigate a React application, we can use several methods based on the version of React Router. In React Router v6, the useNavigate hook is introduced, which is recommended for programmatic navigation. By calling the navigate function returned from useNavigate, we can navigate to other routes. In React Router v5, the useHistory hook is used for programmatic navigation. The useHistory hook works with methods like history.push() and history.replace(), which are used for navigation. Alternatively, the Link component can also be used for navigation. Here is a list of some approaches.

• Using useNavigate()
• Using useHistory()
• Using Link Component

Using useNavigate()

The useNavigate hook is used for programmatic navigation. It provides a navigation function that enables navigation to different routes. Here is an example of useNavigate().

Example

// Profile.jsx

import React from 'react'
import { useNavigate } from 'react-router-dom'

const Profile = () => {
    const navigate = useNavigate();

  return (
    <div>
        <h1>Click Button</h1>
        <button onClick={() => navigate('/home')}>Go To Home</button>
    </div>
  )
}

export default Profile

Output

Using useHistory()

The useHistory hook in React Router allows programmatic navigation by using methods like history.push() and history.replace(). The history.push() function is used to navigate to a different page with the URL provided as an argument. This URL is pushed onto the history stack. When history.replace() is used, it replaces the current entry in the history stack. Here is an example of useHistory().

// Profile.jsx

import React from 'react'
import { useHistory } from 'react-router-dom'

const Profile = () => {
    const history = useHistory();

  return (
    <div>
        <h1>Click Button</h1>
        <button onClick={() => history.push("/home")}>Go To Home</button>
    </div>
  )
}

Output

Using Link Component

In this approach, the Link component is used for navigation with React Router. The Link component takes a to attribute, which specifies the route to the page to be rendered.

// App.jsx

import React from 'react'
import {Routes, Route, Link, BrowserRouter} from 'react-router-dom'

const Temp = () => (<div>
                        <h1>Click Button</h1>
                        <Link to="/home">
                          <button>Go To Home</button>
                        </Link>
                    </div>);

const Home = () => (<div>
                      <h1>
                        This is Home Page
                      </h1>
                    </div>);

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/' element={ <Temp/> } />
        <Route path='/home' element={ <Home/> } />
      </Routes>
    </BrowserRouter>
  )
}

export default App

Output

In React Router, three primary types of navigation work with both useNavigate and useHistory hooks. To begin using these navigation methods. You first need to get the navigation function by calling the hook with const navigate = useNavigate();.

Once you have the navigate function, you can use it in three ways:

• You can navigate to a specific page by passing a path string (like navigate("/home") to go to the home page).
• Move forward in the navigation stack using navigate(1) (which functions like the browser's forward button).
• Go back to the previous page using navigate(-1) (equivalent to clicking the browser's back button).

Conclusion

Programmatic navigation in React Router helps us navigate to different routes based on events or actions. Hooks like useNavigate (v6) or useHistory (v5), along with the Link component, are commonly used for programmatic navigation.