Instruction

We have boilerplate src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import {createStore, applyMiddleware} from 'redux';

import App from './components/app';
import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware()(createStore);

ReactDOM.render(
    <Provider store={createStoreWithMiddleware(reducers)}>
        <App/>
    </Provider>
    , document.querySelector('.container'));

Now, we are going to make two routes: Hello, Goodbye:

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import {createStore, applyMiddleware} from 'redux';

import App from './components/app';
import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware()(createStore);

class Hello extends React.Component {
    render() {
        return <div>Hello!</div>
    }
}

class Goodbye extends React.Component {
    render() {
        return <div>Goodbye!</div>
    }
}

ReactDOM.render(
    <Provider store={createStoreWithMiddleware(reducers)}>
        <App/>
    </Provider>
    , document.querySelector('.container'));

First of all, we need to import BrowserRouter. This package interacts with History package and intended to know, what to do in a certain URL. Simply, it is a piece of code, that interacts with a history library.

import {BrowserRouter} from 'react-router-dom';

Then we should import Route package, which knows what component to show in a specific URL

import {BrowserRouter, Route} from 'react-router-dom';

Now we are ready to wire up everything. Let's start with ReactDOM.render(). Here we'll use BrowserRouter and two Routs.

ReactDOM.render(
    <Provider store={createStoreWithMiddleware(reducers)}>
        <BrowserRouter>
            <div>
                <Route path="/hello" component={Hello}/>
                <Route path="/goodbye" component={Goodbye}/>
            </div>
        </BrowserRouter>
    </Provider>
    , document.querySelector('.container'));

Also, we could add anything beside Route to that div of BrowserRouter:

ReactDOM.render(
    <Provider store={createStoreWithMiddleware(reducers)}>
        <BrowserRouter>
            <div>
                <h2>ROUTING</h2>
                <Route path="/hello" component={Hello}/>
                <Route path="/goodbye" component={Goodbye}/>
            </div>
        </BrowserRouter>
    </Provider>
    , document.querySelector('.container'));