En Route!

The proper route to an understanding of the world is an examination of our errors about it.
Errol Morris

In our previous article, we found out that our app had a few issues.

One of them was the lack of routing, which means, in other words that the app had one page, and whatever the URL, we would end up in this specific page.

Now of course, a real-world application has a welcome page, a login page, etc., and these are displayed depending on what URL you are visiting. It seems pretty obvious, but you do need to handle that logic somewhere, and that is the job of react-router.

React-router is the de facto solution for routing in React, and went across many iterations and architectures to arrive where it is today.

In the previous versions, all the routes were defined in one monolithic configuration, while now the routes are dynamic and much more aligned with the React philosophy.

Enough history for now, let’s dive in!

Installing react-router (commit)

Since we are making a web application, we will actually be installing and using react-router-dom. Of course internally it uses react-router.

If we were making an iPhone app (using React Native), we’d be using react-router-native.

As usual, let’s fire Yarn to install our dependency:

yarn install react-router-dom

At the very root of our application (in src/index.js), we then wrap our application with the <BrowserRouter /> component, like so:

ReactDOM.render(
   <BrowserRouter><App /></BrowserRouter>, 
   document.getElementById('root')
);

The BrowserRouter component uses the HTML5 history API to keep the UI in sync with the URL. Its job is making sure that when you navigate to a page, the URL is updated, and if the URL is updated manually, that your React code is notified.

Creating new pages (commit)

In this commit, we are going to move our existing (and unique) page, located in App.js, into game.js.

Indeed, this page will be the page where the game runs.

We are also going to create a home.js page, to welcome the visitor and allow her to start a new game.

And finally, in App.js, we are going to put the “shell” of the app, the headers, footers, navigation, and decide which page to show inside this shell using react-router.

App.js

This page then becomes the shell of our application.

You can see that we added some header, footer, and a main content.

The important bit is actually in the main content: we added a switch component, which is used to display one of the route based on which URL is your browser in.

In practice, it means that if you were at the root of the website (say http://www.plannipoker.com), it would render the Home component/page.

If you were on http://www.plannipoker.com/games/ABCD, where ABCD can be any string, it would render the Game component/page.

You probably noticed that we have an exact prop on the Home route: that’s because without it, any URL starting by / (which is basically every single URL) would match the route. By adding exact, we make sure only ‘/’ is matched.

game.js

The content of this page is mostly what used to be in App.js.

There is one point of interest though here.

If you remember, we used to get the ID of the game by reading the URL, which was quite hacky and prone to issues.

Not anymore! We are now using react-router, which means that our pages receive some props with information about the current URL.

If you remember in App.js, we defined our route like that: /games/:gameId . This gameId variable can be found in our props now, in the Game page, by reading this.props.match.params.gameId . Magic!

home.js

Last but not least, our new home page.

We are not adding much to it, except a simple link to start a new game. The game ID is randomly generated every time the page is mounted, and uses the Link component from react-router to navigate to the game page.

And this is it! We now have a proper routing in place, allowing us to add new pages effortlessly.

Next week, we are going to improve our user experience by adding some (very simple) login, and make sure we remember the user’s name.