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…