Building a web app with React, Redux, and the Steem Javascript API, Part 5

In part 4 of this tutorial we added the MUICSS material design framework, introduced Moment.js to simplify and adjust how Unix timestamps are displayed in our posts, and added Google fonts and some CSS to spruce up the look of the project. In this part of the series I'll show you how to set up routing with react-router-dom.

What you will learn in this tutorial:

Installing and setting up react-router-dom
Adding the routes in our App.js component
Converting the header buttons we created in the previous tutorial into functioning buttons using react-router-dom's Link function

Requirements:

All of the requirements from parts 1, 2, 3, and 4
react-router-dom

Difficulty: Intermediate

Using react-router-dom for routing in our project

After doing a lot of searching pertaining to React routing packages I stumbled upon react-router-dom. This package appears to be the newer go-to package when it comes to routing in React, however there is some ambiguity when it comes to distinguishing react-router-dom from react-router. This Stackoverflow post clarifies the differences between the two.

There is also some talk around the web that attempting to use react-router inside a Redux app will lead to problems. After doing some reading and playing around with the code I've found that using react-router-dom in our Redux project is absolutely ok. It appears you only run into problems using react-router-dom in a Redux project in certain cases and some things, like time traveling debugging, won't work. For the sake of our project using the basic react-router-dom setup works just fine.

Now that we've covered some of the noise surrounding routing in React let's actually install the package in our project:

$ npm install --save react-router-dom

After installing let's set up the routing in App.js. In order to use react-router-dom in our component we need to import <BrowserRouter> and <Route> from the package:

import { BrowserRouter as Router } from 'react-router-dom';
import Route from 'react-router-dom/Route';

The first import statement imports BrowserRouter as 'Router' so that we can use it simply by typing a <Router> tag. The second import statement imports Route which allows us to set individual routes using the <Route> tag.

After importing these packages and setting up a basic Router our App.js file will look like this:

import React, { Component } from 'react';
import './App.css';
import steem from 'steem';
import dsteem from 'dsteem';
import Utopian from './Utopian';
import UtopianTrending from './UtopianTrending';
import UtopianAccount from './UtopianAccount';
import UtopianWeekly from './UtopianWeekly';

import { BrowserRouter as Router } from 'react-router-dom';
import Route from 'react-router-dom/Route';

class App extends Component {

  render() {
    return (
      // Importing BrowserRouter let's us use Router to create a router element
      <Router>
        <div className="app-container">
          // Inside Router we use Route to set paths for individual Routes
          <Route path="/" exact component={Utopian} />
          <Route path="/trending" exact component={UtopianTrending} />
          <Route path="/utopianio" exact component={UtopianAccount} />
          <Route path="/bestof" exact component={UtopianWeekly} />
        </div>
      </Router>
    );
  }
}


export default App;

Breaking it down

Let's take a look at an individual route and break down what is going on:

<Route path="/trending" exact component={UtopianTrending} />

First we create an individual Route and set the path equal to the query we want to redirect to. I have my machine set up to run this project on localhost:3000, so when I redirect using this path it will redirect the page to localhost:3000/trending.

Next we have exact, which is a built in keyword that comes with react-router-dom. This specifies that the URL query has to exactly match the path specified. For example, if we attempting to go to localhost:3000/trending/somethingelsewe would get an error. In order for this route to render properly the URL query has to match the path exactly.

The final part of our route is component={UtopianTrending}. component specifies which component we want to render when the user goes to the path specified.

All of the routes within our router follow the same convention and work in the same manner. The next step is to go to our Menu.js component (where our navigation links are) and set up the buttons/links so that when they're clicked they utilize the routers we just set up and properly redirect the user to the appropriate components/pages.

Setting up the navigation with `<Link>`

In order to make the navigation links in our Menu.js component functional there is more work that needs to be done. In order to set up the links created with the Router and individual routes we made we need to use react-router-dom's <Link>in our navigation menu.

First import it from the package:

import { BrowserRouter as Router, Link } from 'react-router-dom';

Now we can set up the <Links> and direct them to the appropriate components specified in our router in App.js. Menu.js now looks like this:

import React, { Component } from 'react';
import Button from 'muicss/lib/react/button';
import Appbar from 'muicss/lib/react/appbar';

import { BrowserRouter as Router, Link } from 'react-router-dom';


class Menu extends Component {

  render() {
    return (
      <div className="menu-container">
        <Appbar>
          // Wrapping the navigation buttons inside  and directing them with to='urlquery' makes our nav links functional
          <Link to='/'><Button variant="raised" color="accent">Hot</Button>Link>
          <Link to='/trending'><Button variant="raised" color="accent">Trending</Button>Link>
          // This page has not yet been created/I might refactor it to something else so for now I'll skip over it
          <Button variant="raised" color="accent">Cash</Button>
          <Link to='/utopianio'><Button variant="raised" color="accent">Utopian-io</Button>Link>
          <Link to='/bestof'><Button variant="raised" color="accent">Weekly Picks</Button>Link>
        </Appbar>
      </div>
    );
  }
}

export default Menu;



This code is relatively straight forward. Wrapping the buttons we created in previous tutorials inside the <Link></Link> tag and then directing them to the proper page/component  via to="urlQuery" is all that needs to be done to get the project all set up with react-router-dom.
If you're following along with this series and implement these changes you should be able to run the project with npm start and now when the navigation menu links created in previous tutorials are clicked they will now function and direct you to the correct page.






Conclusion



This concludes the tutorial on react-router-dom. Setting up a router in React isn't too drawn out or difficult once you know what package to use and the conventions and quirks that come along with it. Like I mentioned earlier there are some debates pertaining to which package to use and whether or not certain packages are compatible with Redux. React-router-dom seems to work just fine with our Redux app and gets the job done.
If you're stuck this Youtube tutorial is extremely helpful and should help clarify any questions you have about react-router-dom.
In the future segments of this tutorial I will move on to finishing/creating more API requests to add more data to the app, creating some sorting elements that allow the user to sort results by various parameters (i.e. date a post is published, pending payout in both high-to-low and low-to-high lists, etc...), and I will teach you how to get the web app live on the internet using Heroku.
Proof of Work:


https://github.com/Nicknyr/Steem.js_API_Tutorial

Tutorial: Building a web app with React, Redux, and the Steem Javascript API, Part 5