Passing and Extracting Route/Query Parameters in React Router

In React Router, route parameters and query parameters can be passed and extracted to make your
application more dynamic. Here’s a detailed explanation with examples:

Passing Route Parameters

Route parameters are parts of the URL that can change and are often used to represent specific
items in a list, such as a user ID or product ID.

Defining a Route with Parameters

To define a route with a parameter, use the colon (:) syntax in the path.

App.js
import React from 'react';
import { BrowserRouter as Router, Route, Routes, Link } from 'react-
router-dom';
import Home from './components/Home';
import User from './components/User';

function App() {
return (
<Router>
<div>
<nav>
<Link to="/">Home</Link>
<Link to="/user/1">User 1</Link>
<Link to="/user/2">User 2</Link>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/user/:userId" element={<User />} />
</Routes>
</div>
</Router>
);
}

export default App;

To extract the parameters in the component, use the useParams hook from react-router-dom.

User.js
import React from 'react';
import { useParams } from 'react-router-dom';

function User() {
let { userId } = useParams();
return (
<div>
<h2>User ID: {userId}</h2>
</div>
);
}

export default User;

Query parameters are part of the URL after the ? and can be accessed using the URLSearchParams
API.

Adding Query Parameters to Links

You can add query parameters directly in the Link component or through navigation.

App.js
import React from 'react';
import { BrowserRouter as Router, Route, Routes, Link } from 'react-
router-dom';
import Home from './components/Home';
import Search from './components/Search';

function App() {
return (
<Router>
<div>
<nav>
<Link to="/">Home</Link>
<Link to="/search?query=react">Search React</Link>
<Link to="/search?query=router">Search Router</Link>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/search" element={<Search />} />
</Routes>
</div>
</Router>
);
}

export default App;

To extract query parameters in the component, use the useLocation hook from react-router-dom
and the URLSearchParams API.

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

function useQuery() {
return new URLSearchParams(useLocation().search);
}

function Search() {
let query = useQuery();
let searchQuery = query.get('query');
return (
<div>
<h2>Search Query: {searchQuery}</h2>
</div>
);
}
export default Search;
Full Example with Both Route and Query Parameters

Let’s combine both route and query parameters in a single example.

App.js
import React from 'react';
import { BrowserRouter as Router, Route, Routes, Link } from 'react-
router-dom';
import Home from './components/Home';
import User from './components/User';
import Search from './components/Search';

function App() {
return (
<Router>
<div>
<nav>
<Link to="/">Home</Link>
<Link to="/user/1">User 1</Link>
<Link to="/user/2">User 2</Link>
<Link to="/search?query=react">Search React</Link>
<Link to="/search?query=router">Search Router</Link>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/user/:userId" element={<User />} />
<Route path="/search" element={<Search />} />
</Routes>
</div>
</Router>
);
}

export default App;

function User() {
let { userId } = useParams();
return (
<div>
<h2>User ID: {userId}</h2>
</div>
);
}

export default User;

function useQuery() {
return new URLSearchParams(useLocation().search);
}
function Search() {
let query = useQuery();
let searchQuery = query.get('query');
return (
<div>
<h2>Search Query: {searchQuery}</h2>
</div>
);
}

export default Search;

Conclusion:

Passing Route Parameters: Define routes with parameters using the colon (:) syntax.

Extracting Route Parameters: Use the useParams hook to extract route parameters in a component.

Passing Query Parameters: Add query parameters to URLs directly or through navigation.

Extracting Query Parameters: Use the useLocation hook and URLSearchParams API to extract query
parameters in a component.

This approach allows you to create dynamic and flexible routes in your React application, enhancing
the user experience by providing specific data based on the URL parameters.