ReactJS useNavigate() Hook
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" }}> w3wiki </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 Beginner. </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.