An introduction to React Router

react-routerPreviously we created a React app to play the darts game Tactics. It was just a one pager without any routing on the client. However, the original idea was to create a real app with users and various game types, and hence, client side routing is an important aspect. For example, our app needs a startscreen from which a user may navigate to the login or choose a game. Within a game, we typically have a gameview and maybe a settings page for game specific options. This means different pages and we need different URLs (for bookmarking) and routing.

Hello React-router

Let’s introduce the app. It is extremely silly and bares the name Silly App. The code is available on Bitbucket, make sure to checkout version 1.0.1 to follow this post. To run the app, first execute npm install followed by npm run start. The app will be compiled with webpack and will be available on http://localhost:7770/

The silly app consists of a startscreen with two links. The links lead either to a read only page with just some text or to a very(!) interactive page where the user can click a button. Check out the gallery to see some of the pages of the app.

The silly app uses React Router to change URLs. We will have two routes leading to two different pages, the first just shows some text and the second shows similar text but also contains a button. Clicking the button changes the styles applied to the text. If you followed the development of the Tactics app in my series on React you probably see an analogy with the PlayerTurner component. This seemed the easiest part to start with.

To enable URL routing we install the react-router module from npm. Before react-router, we were used to just call the render method from react-dom and pass it a component and a DOM node. With react-router this slightly changes because we need to set up the Routing. First we use destructuring syntax to get the stuff we need from react-router

import { Router, Route, IndexRoute, browserHistory } from ‘react-router’;

Basically, the Router is the wrapper, individual routes are made using Route and the IndexRoute is a special one. Finally, browserHistory is needed to make the browser back buttons work. But how do we connect this to our React root element? Look at the following code

First we create a constant called router (this is the ‘component’ which we pass to the render method in the end) and it contains a Router component. This is the one that holds the history, again to make the browser back and forward buttons work. Next we create our routes. Our homepage is located at ‘/’ and this is the main entry point of our app. Hence, we create a Route with path equals ‘/’ and we supply the root component ‘App’. However, if you look at the code in App.js

this component just renders the title of the app and then there is this weird React.cloneElement line. Although not totally sure why this works, this is exactly what we need because it will render the child component based on the chosen route.

Going back to the routing configuration we see three routes defined. The first (a special one because it also uses the ‘/’ path) is the IndexRoute. Then we have two more routes, one for the path ‘/useless’ and one for the path ‘/clickable’. Based on the path (either ‘/’, ‘/useless’ or ‘/clickable’) either the StartScreen component, the Useless component or the Clickable component will be rendered as a child of the App component.

But just manually changing the URL and see the result is no fun. We want a real app where we can click on links and buttons to change the URL…

Welcome <Link>

Let’s checkout the StartScreen code

First thing to notice is that we import Link from react-router. For me this seems like the React way of specifying the good old “a” tag. You need to pass a ‘to’ prop to a Link in order to setup the route. Since we have two views to be reached from here, we simply create two components with a ‘to’ prop of ‘/useless’ and ‘/clickable’. Inside of the components we than add a button.

Clicking either one of the buttons will do the following: it changes the URL which tells react router to update. This means that the app will be rerendered based on the new URL and the correct child component is shown to the user.

A final sidenote

If you downloaded the code from [Bitbucket] and have been playing around with clicking the buttons (especially the one inside the Clickable component), you probably noticed that clicking the ‘click me’ button does not change the URL. Instead, clicking the button updates the state (defined inside the Clickable component). A first extension of the silly app would be to make the Clickable component stateless and use react router to update the style of the text when clicking the button. For example, the URL would look like this

/clickable/0

or /clickable/1

This may be achieved with the params prop in a Route, but let’s examine this in more detail in a later post!


Mijn Twitter profiel Mijn Facebook profiel
Pim Hooghiemstra Webdeveloper and founder of PLint-sites. Loves to build complex webapplications using Vue and Laravel! Latest post
Laravel-mix and the spread operator

Leave a Reply

Your email address will not be published. Required fields are marked *