Home > frontend > How to Implement Dynamic Routing in ReactJS with React Router.

How to Implement Dynamic Routing in ReactJS with React Router.

Dynamic routing is a concept that redirects a website visitor from a page to another based on the value passed on the URL.

By :Thomas Inyangđź•’ 11 Jan 2025

react_router

Introduction

Routing in web development is an important concept of a website, it gives your website a map to direct visitors to the appropriate location based on their actions or inputs. As front-end developers, it’s very important to utilize this concept as it’s beneficial to the users who intend to share a post or product-item URL with anyone.


In this post, you will learn how to route dynamically based on specific input, such as a blog slug, using React Router. This powerful tool simplifies dynamic routing in ReactJS applications, making it straightforward, efficient, and highly effective.

Prerequisite:

  1. Knowledge of ReactJs.
  2. React App with Vite.

What is Dynamic Routing?

Dynamic routing is the ability of a website to display different page components based on the URL path which gives room for more flexibility. An example of dynamic routing is a blog website, where you can have a single route that displays different posts based on their unique slugs or IDs.

How to Implement Dynamic Route In a React App using React Router.

In the section, you will need to do the following:

Step1

Install React App.

npx create-vite@latest

This will install the React App when you follow the prompts. You can either choose JavaScript or Typescript as the programming language tool. For this tutorial choose Typescript.


Step2:

Install React Router.

npm i react-router

This will install the react-router which will enable us to navigate from one page to another.


Step3:

Update the main.tsx file with this.

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router";
import App from "./app";

const root = document.getElementById("root");

ReactDOM.createRoot(root).render(
<StrictMode>
<BrowserRouter>
<Routes>
<Route path="/" element={<App />} />
</Routes>
</BrowserRouter>
</StrictMode>
);

In this code, you’ve been able to set up ReactRouter, and you can navigate between pages by specifying the path “/path” and element component. In this case, this is the homepage path "/”.


Step4:

Create a type file in the src dir, types.d.ts, and enter the following code block

export interface Post {
id: number;
title: string;
slug: string;
content: string;
}

This will be used to strictly type the blog post data.


Step5:

Create mock data for the blog.

src/mockData.ts

import { Post } from "./types";

export const posts: Post[] = [
{
id: 1,
title: "One random blog post",
slug: "one-random-blog",
content:
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente dicta eaque voluptate eveniet quisquam nulla possimus incidunt doloremque rerum deleniti?",
},
{
id: 2,
title: "The Story That Never Happened",
slug: "the-story-that-never-happened",
content:
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente dicta eaque voluptate eveniet quisquam nulla possimus incidunt doloremque rerum deleniti?",
},
{
id: 3,
title: "One blow seven faint",
slug: "one-blow-seven-faint",
content:
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente dicta eaque voluptate eveniet quisquam nulla possimus incidunt doloremque rerum deleniti?",
},
{
id: 4,
title: "We are almost there",
slug: "we-are-almost-there",
content:
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente dicta eaque voluptate eveniet quisquam nulla possimus incidunt doloremque rerum deleniti?",
}
];

The Post interface is imported and used as a “type” for the mockData.


Step6:

Create a components folder and a file AllPosts.txs in it, and enter this code block

import { Link } from "react-router";
import {posts} from "../mockData"
export default function AllPosts(){

return(
<>
<div style={{width:"100%", padding:"4px", backgroundColor: "powderblue"}}>

{posts.map((post, index)=>(
<div key={index} style={{width:"auto", borderRadius:"3px", borderStyle:"solid", borderColor:"red"}} >
<h1 style={{fontSize:"14px"}}>{post.title}</h1>
<Link to={`/post/${post.slug}`}>{post.slug}</Link>;
</div>
))}
</div>
</>
)
}

This is the entry file that shows all the blog posts (mock) and when the post slug is clicked, the user will be redirected (dynamic routing) to the post details page.


Step7

Create a post folder with a PostDetails.tsx file and paste this code

src/post/PostDetails

import { useParams } from "react-router";
export default function PostDetails() {

const { slug } = useParams();
console.log(slug);

return (
<>
<div style={{ fontSize: "50px" }}>
<p>Showing the post slug:{slug}</p>
</div>
</>
);
}

This file will get the params value based on what is passed into the URL.


Step8

Update the App.tsx file.

import AllPosts from "./components/AllPosts";

function App() {
return (
<>
<AllPosts />
</>
);
}
export default App;

Step9

Update the main.tsx file.

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router";
import "./index.css";
import App from "./App.tsx";
import PostDetails from "./post/PostDetails.tsx";

createRoot(document.getElementById("root")!).render(
<StrictMode>
<BrowserRouter>
<Routes>
<Route path="/" element={<App />} />
<Route path="/post/:slug" element={<PostDetails />} />
</Routes>
</BrowserRouter>

</StrictMode>
);
```

In this code, <Route path="/post/:slug" element={<PostDetails />} /> and `:slug` is a placeholder for the unique identifier of each post. When a user clicks on a post slug, the app will redirect the user to the post-details page using the unique identifier (slug) of the post.


Step10

Test run the app from the terminal npm run dev. After loading is complete, when you click on a post slug you will be redirected to the page of the params (slug).


Dynamic routing is very useful for a website. It enhances the user experience by allowing seamless transitions between one to another and making your application feel faster and more responsive.

Conclusion

Knowing how to implement dynamic routing in ReactJs with React Router enables you to seamlessly render page views.


The above steps can also be used to build an e-commerce website where a customer would want to get the full details of a product by clicking on it.

Share with others

You may also like