Blog

Routing is an essential part of any modern web application. It allows users to navigate between different pages and views dynamically without requiring a full page reload. In React, React Router is the most commonly used library for handling routing, and it provides powerful tools for implementing dynamic routing.

Dynamic routing enables pages to render different content based on URL parameters (params) and query strings (queries). This is particularly useful for applications that need to display user profiles, product details, or search results dynamically based on the URL.

In this article, we will explore dynamic routing in React, focusing on how to use params and queries effectively with React Router. We will also cover practical examples, best practices, and use cases for building better React applications.

How to Use useNavigate Hook in React Router

---

What is Dynamic Routing in React?

Dynamic routing in React refers to rendering components based on dynamic segments of a URL. Unlike static routes (where paths are predefined), dynamic routes adjust their content based on URL parameters or query strings.

For example:

• Static Route: /about → Always loads the “About” page.
• Dynamic Route: /user/:id → Loads a user profile dynamically based on the id in the URL.

---

Setting Up React Router for Dynamic Routing

Before working with dynamic routing, make sure React Router is installed in your project. If you haven’t installed it yet, run:

npm install react-router-dom@6

Then, wrap your application with <BrowserRouter> in index.js:

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

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

Now, let’s dive into using params and queries for dynamic routing.

---

Using URL Parameters (params) in React Router

What Are URL Parameters?

URL parameters allow dynamic values to be passed as part of the URL path. These values can be extracted and used inside a component.

For example, in an e-commerce app, you might have a URL like this:

/product/123

Here, 123 is a dynamic parameter that represents a product ID.

Defining a Route with Params

To create a dynamic route, define a parameterized route using :paramName:

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import ProductPage from "./ProductPage";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/product/:id" element={<ProductPage />} />
      </Routes>
    </Router>
  );
}

export default App;

Accessing Params in a Component

To access the dynamic parameter inside ProductPage, use the useParams hook:

import React from "react";
import { useParams } from "react-router-dom";

const ProductPage = () => {
  const { id } = useParams(); // Extracting "id" from the URL

  return (
    <div>
      <h1>Product Details</h1>
      <p>Product ID: {id}</p>
    </div>
  );
};

export default ProductPage;

Explanation:

• The :id in the route (/product/:id) acts as a placeholder for the actual product ID.
• The useParams hook extracts this ID from the URL and provides it as an object ({ id }).
• The component renders different content dynamically based on the URL.

Example URLs and Outputs:

URL	Output in Component
/product/101	Product ID: 101
/product/500	Product ID: 500

---

Using Query Strings (queries) in React Router

What Are Query Strings?

Query strings allow additional data to be appended to a URL without modifying the route structure. They usually appear after a ? in the URL and consist of key-value pairs:

/search?query=react

Here, query=react is a query string used for search filtering.

Handling Query Strings in React

React Router provides the useLocation hook to access the query parameters from the URL.

import { useLocation } from "react-router-dom";

const useQuery = () => {
  return new URLSearchParams(useLocation().search);
};

const SearchPage = () => {
  const query = useQuery();
  const searchTerm = query.get("query"); // Get the value of "query"

  return (
    <div>
      <h1>Search Results</h1>
      <p>Showing results for: {searchTerm}</p>
    </div>
  );
};

export default SearchPage;

Defining a Route for Query Strings

To use query strings, define a route without parameters in App.js:

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import SearchPage from "./SearchPage";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/search" element={<SearchPage />} />
      </Routes>
    </Router>
  );
}

export default App;

Example URLs and Outputs:

URL	Output in Component
/search?query=react	Showing results for: react
/search?query=router	Showing results for: router

---

Combining Params and Query Strings

Sometimes, you need to use both params and queries together. For example, a blog might have a URL like:

/blog/react-router?page=2

Here:

• react-router is a dynamic parameter representing the blog topic.
• page=2 is a query string representing pagination.

Implementing This in React

Step 1: Define the Route

<Route path="/blog/:topic" element={<BlogPage />} />

Step 2: Access Params and Queries in the Component

import { useParams, useLocation } from "react-router-dom";

const useQuery = () => {
  return new URLSearchParams(useLocation().search);
};

const BlogPage = () => {
  const { topic } = useParams(); // Get topic from URL
  const query = useQuery();
  const page = query.get("page"); // Get query string

  return (
    <div>
      <h1>Blog Topic: {topic}</h1>
      <p>Current Page: {page}</p>
    </div>
  );
};

export default BlogPage;

Example URLs and Outputs:

URL	Output in Component
/blog/react?page=1	Blog Topic: react, Page: 1
/blog/javascript?page=3	Blog Topic: javascript, Page: 3

---

Best Practices for Dynamic Routing

1. Use Semantic URLs: Keep URLs meaningful and user-friendly. Avoid unnecessary parameters.
2. Handle Edge Cases: Ensure components handle cases where params or queries are missing or invalid.
3. Update Document Title: Dynamically update the page title based on params.
4. Persist Query Parameters: When navigating programmatically, preserve query parameters where needed.
5. Validate URL Data: Convert query values to the correct types (numbers, booleans) before using them.

---

Conclusion

Dynamic routing in React using params and queries provides a powerful way to create interactive and user-friendly applications. Whether you’re building a product page, a search engine, or a blog, understanding how to use useParams and useLocation will help you manage routing efficiently.

By following best practices and using React Router’s built-in hooks, you can ensure a seamless navigation experience for your users.

Would you like to explore more advanced routing concepts such as protected routes and lazy loading? Let me know in the comments! 🚀