Understand Nested Routing in React – React Routing Part-2

In this blog we will understand Nested Routing in React. First we will discuss the Nested routing and its use cases.

Also Guys if you haven’t read Routing in React – Part 1 then click Here as this Blog is part 2 of that blog.


Suppose we have a Blog Page where all blogs will be listed and if user clicked on any blog link the its details page needs to open under blog
as parent slug with its title.

for Example, Blog Page Url is : http://localhost/blog

is will list all of the blog titles like this :

Tutorial 1
or
Tutorial 2

and if we click on these titles then url would be like this :

http://localhost/blog/tutorial-1
or
http://localhost/blog/tutorial-2

and these url are basically nested urls as both of them comes under /blog scheme so this kind of scenarios can be handled via nested routing.

So let’s get started :

In our Exiting App.jsx, Add a menu for Blog after Home menu :

Note: Here the menuData was already presented (in previous Routing Blog), We have just added Blog after Home.

here we have added 1 more menu named Blog after Home

Create a Route for Blog In Exiting Switch

Note : as of now we dont have Blog component so we will create it in next step.

Now Create a Blog Component named Blog.js which uses Nested Routing in React :

In above code we are using useRouteMatch to read the current matched url means it is reading till /blog of the url that is current route and we have create 1 new switch with following route :

So its means if we get any other slug after current slug (/blog), then that should load the component Detail(this component we will create in next step.)

So basically we have created a nested route in blog route in Blog Component itself.

Now lets create a Detail Component named Detail.js like this :

In this component we are using useParams() hook to read the available parameters in url, and we are reading slug and finding in our data with that slug and showing the relevant details.

let see how our application looks like now :

Hope you understand the routing to download the full source code please click here.

If you face any issues then let me know in comments section. also suggestions are most welcome.

Published by

Jeetendra Singh

Jeetendra Singh is a Full Stack Architect who has 12+ Years of Experience into Software Development. He is a Microsoft certified technology Specialist and AWS Certified Associate Architect. His Major Interests are in Mongo Db, Express Js, React Js, Node Js (MERN STACK), Python, DJango, Redis, Mysql, Dynamo DB , Devops, Jenkins, Cloud/Lamda , Fast Api. He build variety of applications using Python, Mern, Mean, Node, JavaScript, jQuery & PHP