Beginner’s Guide to React Router

Or what I wish I knew when starting with React Router.

Click here to go to the Github repo

This tutorial uses React Router version 2.0.1 and Babel version 6.7.4

React Router is the standard routing library for React. From the docs:

“React Router keeps your UI in sync with the URL. It has a simple API with powerful features like lazy code loading, dynamic route matching, and location transition handling built right in. Make the URL your first thought, not an after-thought.”

Step 1. Getting Started

To get started you can either clone the starter repo and jump to step two, or follow along the next steps and set up your project manually.

Manual Setup

First, let’s get our environment set up with React, Babel, and webpack. First create a folder and cd into it. Then run npm init -y:

npm init -y

• -y just answers yes to all of the questions

Next, install react, react-router, and react-dom and save them as dependencies:

npm i react react-dom react-router@2.0.1 --save

Next, install our dev dependencies. These will be webpack, webpack-dev-server, babel-core, babel-loader…