Open In App
Related Articles

ReactJS useNavigate() Hook

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

The useNavigate() hook is introduced in the React Router v6 to replace the useHistory() hook. In the earlier version, the useHistory() hook accesses the React Router history object and navigates to the other routers using the push or replace methods. It helps to go to the specific URL, forward or backward pages. In the updated version, the React Router’s new navigation API provides a useNavigate() hook which is an imperative version to perform the navigation actions with better compatibility

Approach:

To navigate back to previous pages we will use the React useNavigation Hook. We will pass a numerical value to navigation and switch back to the previous page inside the navigate, instance of the useNavigate hook, as a prop and call it when the defined button is clicked.

Now let’s understand the working of useNavigate() hook using examples. 

Steps to Create React Application and Installing Module:

Step 1: To start with, create a React application using the following command:

 npx create-react-app demo

Step 2: Move to the project directory.

cd demo

Step 3: Install the latest version of react-router-dom in the React application by the following.

npm i react-router-dom

Project Structure:

The updated dependencies in package.json file.

"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.19.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},

Example: This example uses useNavigate() hook to navigate to the about page and to go back to the home page.

Javascript

// Filename - App.js
 
import React from "react";
import {
    BrowserRouter,
    Routes,
    Route,
} from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";
 
function App() {
    return (
        <>
            <BrowserRouter>
                <Routes>
                    <Route
                        exact
                        path="/"
                        element={<Home />}
                    />
                    <Route
                        exact
                        path="/about"
                        element={<About />}
                    />
                </Routes>
            </BrowserRouter>
        </>
    );
}
 
export default App;

                    

Javascript

// Filename - components/Home.js
 
import React from "react";
import { useNavigate } from "react-router-dom";
 
const Home = () => {
    const navigate = useNavigate();
 
    return (
        <>
            <h1 style={{ color: "green" }}>
                GeeksForGeeks
            </h1>
            <button onClick={() => navigate("/about")}>
                About
            </button>
        </>
    );
};
 
export default Home;

                    

Javascript

// Filename - components/About.js
 
import React from "react";
import { useNavigate } from "react-router-dom";
 
const About = () => {
    const navigate = useNavigate();
 
    return (
        <>
            <h1 style={{ color: "green" }}>
                A Computer Science portal for geeks.
            </h1>
            <button onClick={() => navigate(-1)}>
                Go Back Home
            </button>
        </>
    );
};
 
export default About;

                    

Note: Here, the numerical argument has passed to move the history stack pointer.

Step to run the application: Open the terminal and type the following command.

npm start

Output: Similarly, we can pass the numerical arguments to go forward.

ReactJS useNavigate() Hook

ReactJS useNavigate() Hook 



Last Updated : 20 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads