Passing URL parameters to a route using useParams in react-router-dom version 6

Passing URL parameters to a route using useParams() hook in react-router-dom version 6.

a) The useParams hook from react-router allows you to access dynamic parameters in the URL.

b) You may come across situation that you want to access the parameters of the current route so in this case, useParams hook comes into action.

Note: In order to create basic setup for react js application, please go through following link.

Environment Setup and Installation for React Js Application

Passing-url parameters to route using react router dom version 6

Folder Structure:

Installation:

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

export default function App() {

  return (

    <BrowserRouter>

      <Routes>

        <Route path="StudentDetails/:studid" element={<StudentDetails />} />

      </Routes>

    </BrowserRouter>

  );

}

C) StudentDetails.js

import React from 'react';

import { useParams } from 'react-router-dom';

const StudentDetails = () => {

  const params = useParams();

  return <div id="stud">Student Detail - Id : {params.studid} </div>;

};

export default StudentDetails;

D) style.css

#stud {

  border: 1px solid black;

  width: 325px;

  height: 80px;

  line-height: 80px;

  padding-left: 25px;

  margin:10px;

}

Happy Learning!! Happy Coding!!