Using React Router for Modularization
A brief guide to nested routes
Sometimes, when building a multipage application, you might have very different features for different pages, or you may want to create different layouts for different parts of your app. This can be achieved by modularization to create different segments of your app.
About React-Router
React-Router is a lightweight client-side and server-side routing library for React. It allows you to handle routing in a web application, displaying different pages depending on the URL. React Router will match the URL and load that particular page’s component. Version 6 will pick the most specific match for a given URL, so you don’t have to worry about ordering your routes.
Goal
Using React Router to segment an app into different sections.
Prerequisites
For this tutorial, you must have Node ≥ 14.0.0 and npm ≥ 5.6 installed on your computer. You also need to have a general understanding of building and working with reusable components, and you need a code editor. We will also be using styled-components, which is a library that allows you to write CSS directly inside your JS file. This eliminates the need to move back and forth between different files to style a component.
Let’s get into it.
Set Up
We will start by creating a new React application by running this command on your terminal or cmd:
npx create-react-app my-router-appNavigate into your application and then install the react-router-dom package and the styled-components package. The @6 at the end of the command means you’re adding version 6 of react-router-dom.
cd my-router-app
npm install react-router-dom@6 --save styled-componentsYour package.json file should look similar to this:
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"styled-components": "^5.3.5",
"web-vitals": "^2.1.4"
},Once the setup is complete, you can run the command npm start in your app’s folder to launch. You can now see the default React application when you open port 3000 on your localhost.
Create Pages and Components
Everything we create in this section is technically a component, but some of the components will serve as pages while others will be rendered as part of pages.
We start by creating a pages directory inside the src folder. This is where all our pages will go. And also, in our src folder, we create a components directory where we will put the other components that make up our pages.
We will build a LoginPage, a HomePage, a CollectionsPage, and a FavouritesPage. We will also use styled-components to add very simple styles to our components.
Next, we create the Footer component.
We will be creating the Navbar component in the next step.
Utilizing Nested Routes To Segment Your App
Nested routes are one of the strongest features offered by React Router. According to the React Router documentation:
Routes can be nested inside one another, and their paths will nest too (child inheriting the parent)
Here is a good article that goes deeper into how nested routes can be utilized to create complex layouts.
In our case, we will use the nested routes concept to render the Navbar and Footer components conditionally.
We start by creating a new component in our components folder, which we will name MainLaoyout.js . In this component, we will import all components with a similar layout and the components appearing on multiple components. The Navbarand Footercomponents will be rendered in the HomePage , CollectionsPage and FavouritesPage.
As you can see from the above, to render a component on multiple pages, you have to place that component outside of the Routes tag that contains said components. The Routes tag is the parent of the Route tag, where each Route tag will contain each page that can be navigated to. This way, the Navbar and Footer components will appear on all the pages described within the Routes tag.
Next, we create the Navbar component. This component will contain links to all the other pages in our app.
Finally, in our App.js component, we put the different parts together to complete our application.
At the end of this final step, you should have a home page with a navbar and footer. When you navigate through the pages, you should see the nav and footer are persistent, and when you click on the ‘Logout’ option, you will see the nav and footer are no longer there.
Conclusion
In this article, we used nested routes to create a modularization. Our application only had two areas, but you can use this concept to create even more areas.
And finally, note that each child component in the Routes tag must be a Route component. This is why, in the MainLayout component we used React.Fragment , so that when we render it from the App.js component, it is surrounded by a Route tag.
I hope you found this article helpful!
