Use of query parameter(params) using React

Get real-world exposure to the use of query parameter useParams()

NavLink
<Link> can be useful for the inner side of links in our application e.g Going to the Homepage, the About page, etc.

A <NavLink> is very similar to the<Link> but it can also hold a specific class for “active” links.
e.g <NavLink to="/about" activeClassName='active'> about </NavLink>

e.g: Let’s say you are on the about page and the about link wants to be of a certain color, you could do that we the <NavLink>

index.js

import { createRoot } from “react-dom/client”;
import { BrowserRouter } from “react-router-dom”;

import “./index.css”;
import App from “./App”;

const rootElement = document.getElementById(“root”);
const root = createRoot(rootElement);

root.render(
<BrowserRouter>
<App />
</BrowserRouter>,
);

App.js

import { Routes, Route } from “react-router-dom”;
import “./index.css”;

import Navbar from “./components/navbar/Navbar”;
import Home from “./pages/home/Home”;
import Posts from “./components/Posts”;

const App = () => {
return (
<>
<Routes>
<Route path=”/” element={<Home />} />
<Route path=”/navbar” element={<Navbar />} />
<Route path=”/posts/:id” element={<Posts />} />
</Routes>
</>
);
};

export default App;

Params
Let's say you have a blog application which has some posts, that post may have id, title, slug,etc.
e.g http://localhost.com/posts/1

E.g 1:
import { useParams } from “react-router-dom”;

const Posts = () => {
const params = useParams();
return <div>Blog Post Number is {params.id}</div>;
};

export default Posts;

output:

The use case for this would after getting the id, we can request to server to get that specific post, here say post with id 5.

E.g 2:
modify App.js
<Route path=”/posts/:id/:name” element={<Posts />} />

modify Posts.jsx
<h2>Name: {params.name}</h2>

output: