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 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
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