Overview of React Routing
A quick overview of Routing in React and how it works in class and functional components
Introduction
Components are the building blocks in React based applications. When you develop a big application, the best practice is to decompose application into small components. But how does these components communicate with each other? In React, this communication is achieved via routing. One of the main advantage of React is the huge ecosystem of libraries to choose from. React Router is a library for routing in React. It enables navigation among various components in a React application. In this post, we’ll explore the steps required to do routing in React.
Before we start, I’m assuming that you already have a React project setup. If not, please refer here.
What’s React Router
React Router is a library for routing in React. react-router contains all the common components between react-router-dom and react-router-native. If you are writing an application that will run in browser, we need to install react-router-dom. If you are writing a React Native application, we need to install react-router-native.
Install React Router
Run the following command on your workspace directory to install React Router:
What are we building?
Let’s take a simple example of navigating to three pages via a sidebar menu. ( A team summary page and two pages to show team details.)
The menu bar, would look something like this:
On our landing page, we can view the above sidebar menu and based on clicks on each of the menu items, it would navigate to the respective placeholder pages.
Create Components
In this example, let’s use components from Ant Design to develop sidebar menu. (You can consider this post as an example to How to create sidebar menu in React as well :-))
How to handle page redirect in class components and functional components?
Since we are using menu items in this example, we have to specify redirect instructions inside the corresponding click events.
As functional components have the advantage of hooks, you can import useHistory from ‘react-router-dom’. Then, give URL inside click event as history.push(‘/pathname’).
If our component is a class component, there are a few more points to take care. First, import Redirect from ‘react-router-dom’. As you know, in class components, we cannot directly change the state. In this example I am using three components (pages) to navigate to. So set three variables as false in state as below.
Then change the state as true in the click event.
Then do the conditional check in the render method and allow page to redirect accordingly.
Now let’s add router to navigate through respective pages.
Add Router
First, import BrowserRouter, Route and Switch from react-router-dom package in App component. Import all the components to navigate as well.
Everything we need to render in the UI should be wrapped inside BrowserRouter. To make sure that only one component is rendered at a time, we need to write Switch tag inside BrowserRouter. Now, we can specify which component to render inside the Route tag and write the required URL name. It is always good to write exact to specify the path in Route tag, to ensure that it matches only the specified route, not any child routes. Take a look at our App component below.
Now, let’s see how the navigation works. Access http://localhost:3000/teamSummary and we can see the page as follows:
On click of Team 1 menu item, it navigates to the URL http://localhost:3000/firstTeam which looks like the following:
On click of Team 2 menu item, it navigates to the URL http://localhost:3000/secondTeam which looks like the following:
Working version of this example is available at the following repo:
Conclusion
Now with the help of above functionalities, you can start to develop your own components and navigate through the pages . I hope this post helps you to understand React Routing in a better way.
Thanks for reading!!
