useNavigate and useLocation hooks react-router-dom-v6

- Sunday, January 02, 2022

useNavigate and useLocation hooks - Navigating programmatically to a route.

In this post, we will learn about two new hooks from react-router-dom version 6 library.

1) useNavigate

- Let’s say on click of a button, If you want to perform redirection to the page, then react router provide us with a hook called as useNavigate.

- useNavigate hook replaced useHistory hook, but it works same as useHistory but in addition it has good feature.

- useNavigate hook is only available in react-router-dom version 6.

- We can redirect to Previous and Next page with the help of useNavigate hooks.

2) useLocation

- We required two library React 16.8+ and react-router-dom 5.1+ for useLocation hook.

- It is a function that returns the location object that contains information about the current URL.

- New location object is created, whenever the URL changed.

useNavigate-useLocation-hooks-react-router-dom-version-6

useNavigate and useLocation hooks react router dom version 6Js and Xstate

Install React Router Command

npm install react-router-dom --save

Sample code:

A) index.js

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

B) App.js

import React from 'react';
import './style.css';
import { Routes, Route, BrowserRouter } from 'react-router-dom';
import StudentDetails from './StudentDetails';
import Student from './Student';

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="Student/:studid" element={<Student />} />
        <Route path="StudentDetails" element={<StudentDetails />} />
      </Routes>
    </BrowserRouter>
  );
}

C) Student.js

import React from 'react';
import { useParams, useNavigate } from 'react-router-dom';

const Student = () => {
  const params = useParams();
  const navigate = useNavigate();

  const onNavigatePageClick = (e) => {
    e.preventDefault();

    // Navigate Student Details to Student page.
    navigate('/StudentDetails/', {
      state: { studId: params.studid, studFirstName: 'Vikas' },
    });
  };
  return (
    <div id="mainDiv">
      <div id="pageName">Student Js Page </div> <br />
      <div>============================ </div> <br />
      <div id="stud">Student - ID : {params.studid} </div> <br />
      <div>============================ </div> <br />
      <button onClick={onNavigatePageClick}>
        Navigate to Student Details Page
      </button>
    </div>
  );
};

export default Student;

D) StudentDetails.js

import React from 'react';
import { useLocation } from 'react-router-dom';

const StudentDetails = () => {
  const { state } = useLocation();

  return (
    <div id="mainDiv">
      <div id="pageName">Student Detail Js Page </div> <br />
      <div>============================ </div> <br />
      <div>Student Detail - Id: {state.studId} </div> <br />
      <div>Student Detail - First Name: {state.studFirstName} </div> <br />
      <div>============================ </div> <br />
    </div>
  );
};

export default StudentDetails;

E) Style.css

#mainDiv {
  border: 1px solid black;
  height: 200px;
  width: 350px;
  margin: 10px;
  padding: 5px;
}

#pageName {
  color: orange;
  background-color: gray;
  font-weight: bold;
}