Getting Started with React Router

Learn how to configure routes for specific components and create links between them

Valeri Karpov Up to date (May '17) React

This tutorial is a part of the "Build a Real World App with React & Redux" tutorial series.

So far you've scaffolded out a single view that displays the global feed. It's a good start, but this site's going to need several more views, so let's plug in react-router to make it happen.

What is React Router?

React Router is a complete routing library for React. It 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. -React Router docs

Refactor Store

Before we can get rolling with React Router, our index.js file is getting bloated. To fix this, let's refactor the redux store out into a store.js file.

import { applyMiddleware, createStore } from 'redux';
import { promiseMiddleware } from './middleware';

const defaultState = {
  appName: 'conduit',
  articles: null
const reducer = function(state = defaultState, action) {
  switch (action.type) {
    case 'HOME_PAGE_LOADED':
      return { ...state, articles: action.payload.articles };
  return state;

const middleware = applyMiddleware(promiseMiddleware);

const store = createStore(reducer, middleware);

export default store;

And import this file in index.js. Now index.js is nice and clean, and ready to handle routing.