Conditional Routing with React Router v4

2018-05-09 02:34 AM

90

When building React applications, one thing developers don’t like to utilize is routing in React - usually because of the assumed learning curve involved. In this article, we are going to debunk that myth and show you how easy it is to implement routing and serving responsive routes in your React applications.

In layman’s terms, responsive routing is pretty much serving different routes to users based on the viewport of their device. CSS media queries are usually used to achieve this. The only issue with this is the fact that with media queries, you’re restricted to either showing or not showing different elements by using the CSS props. With responsive routes, you can now serve entire separate views our React applications to different users based directly on their screen sizes.

What we’ll build

In this tutorial, we will see how to build a simple user dashboard application that serves different routes to users based on the size of their device screens.

Table of Contents

What we’ll build

Prerequisites

Getting Started

Creating Navigation Component

Creating the User Cards

Listing all Users

Creating the User Details View

Creating the Dashboard Component

Responsive Routing

Conclusion

Prerequisites

To follow through adequately, you’ll need the following:

NodeJS installed on your machine

NPM installed on your machine

To confirm your installations, run the following command:

node --version
npm --version

If you get their version numbers as results, then you’re good to go

Getting Started

Installing React

This article is based on React you need to have it installed on your machine. To install React, run the following command:

npm install -g create-react-app

Once this is done, your have successfully installed React on your machine. And we can go ahead to create our new each application by running the command:

create-react-app responsive-routing
cd responsive-routing

Next thing to do is to install the necessary modules we would need to successfully build this demo. These modules are the react-router-dom and react-media. We install this by running the command:

npm install react-router-dom react-media

Now, we can start the application by running the command:

npm start

Creating Navigation Component

The Github logo in the center of the page serves as the navigation part of our application. Let's see how to make that. In your src/ folder, create a new folder called Nav and the following files as follows:

cd src
mkdir Nav
cd Nav && touch index.js Nav.css

You’ll need to add the Github logo and save it as logo.svg you can download it from here

If you pay attention to the code snippet above, we used the Link component from the react-router-dom to allow the user navigate to view details of a single user when the card is clicked. So, for a given user card with an id of 10009 and the Link component will generate a URL like this:

http://your-app/current-page/10009

NodeJS installed on your machine

NPM installed on your machine

All this information will be passed when the component is rendered. The component has the following styling:

The listOfUsersPerRow and listOfRows functions work hand in hand to ensure that we have not more than the specified number cards on each row. Next thing to do is then use the functions to create the listing of the users as follows

Creating the Dashboard Component

The dashboard component is simple. We display the UserList and when a card is clicked, display the details on the side of the screen without having to reload the page. Let’s see how to make it work. Create a UsersDashboard.js file in the Users directory:

You’ll need to add the Github logo and save it as logo.svg you can download it from here

Here’s where it all gets interesting, when users visit this application, no matter the screen size, they get this same view and functionality. In full-blown applications, it’s good to give the users experiences they can enjoy properly and one way to do that is to serve them views that match their exact device sizes. We are now going to take a look at how to do this in our application.

When visiting the application on a wide screen, the user is redirected to the /dashboard route of the application and when viewing on a smaller screen, the user should be directed to the /users route of the application. Let’s see how to do this.

In the snippet above, we use the Media component to check the size of the screen. If the screen width is less than 599px, we set the set what we want to be displayed for different routes and also redirect the / and /dashboard routes to the /users route.

Now, if the screen size is greater than 599px we go ahead to display the full user dashboard as we did earlier

At this point, we can see that is a lot better to serve different routes based on screen sizes than using just media queries because you can now serve specially designed components to users based on their device sizes.

Conclusion

In this article, we saw an introduction to component-based routing with React and how to implement conditional rendering in your React applications. Here’s a link to the full Github repository. Feel free to leave a comment or suggestion below