Use of query parameter(params) using React

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


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

<App />


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 (
<Route path=”/” element={<Home />} />
<Route path=”/navbar” element={<Navbar />} />
<Route path=”/posts/:id” element={<Posts />} />

export default App;

Let's say you have a blog application which has some posts, that post may have id, title, slug,etc.

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

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

export default Posts;


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: {}</h2>




Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store