Tag: React Routing

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.

Create a Simple App to Understand Routing in React

In this blog we will create a simple application to understand Routing in React. So basically here we will use a package react-router-dom to implement routing in our application.

This App will be able to load relevant component on a particular url routing, Also we will create a dynamic Page Component that will handle Dynamic Page Routing as well.

I am assuming you have already created a React App, Now lets Start the Routing implementation Step by Step :

Step 1: Install React router dom

Step 2 : We will create a component to show navigation in top of our App, So Create Header.js file with following code :

If you have notices we have Imported and used Component from React Router Dom, So If React Routing We should not use <a> anchor tags, as it reloads the whole page again and In any client side application this is not recommended. tag itself render same as anchor except it doesn’t reload the whole page.

This component will basically will be used to display header menus. also we can see that we are running loop over props.menus, so it means that we will need to pass menus wherever we call this Header component.

Now lets add some css in your already existing css file App.css :

Step 3 : Create a Home Component named Home.js that will show our Home page on our root url :

Above is simple a Component that renders 1 title and description.

Step 4: Create a dynamic page named Page.js that will handle dynamic pages according to url parameters :

Understand Dynamic Page Component

In this Component we are using a Hook named useParams(), this is a function that we have imported from react-router-dom itself that just reads the parameter passed in url for specific route. and behalf of this parameter we are find and showing from our static data for multiple pages. in real scenario this data may come from api as well.

Step 5: Now lets work on App.js to configure the Routes, Lets update the App.js code as following :

Understanding App.js Code In Detail

In this code initially we have imported these 3 components like this :

First Component is Browser Router that we have aliased as Router, this will be our Root Component of routing implementation So we will wrap the whole routing related stuff in this Component

Second Component is Route that will use for defining the url Route and where(On which Component) that Route will land

Third Component is Switch that will be a Wrapper required on All Routes to decide which route is matched with url

Also you can see we have created a menuData and passed this as menus property of Header component, So In Header component we have already handled the menus from props and print it accordingly

Now lets understand the Switch in our Jsx :

In this switch, First Routes is dynamic url and defined as /page/:slug where slug is variable name, can captured in Page Component using useParams() hook. and In this Route component, we have passed Component so it means when this route matches then Load the Page Component.

Second Route is straigt forward for handle Root Url and It will Land on Home component as defined.

let see how its Looks in action :

Thats it folks, If you face any trouble in setup this demo let me know in comments Section. I will be happy to help you. Suggestions are also Welcome.

To download the Source Code Click Here.

Checkout Part 2 of this blog where we have discussed about Nested Routing.