package.json

@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "connected-react-router": "^5.0.1",
+    "history": "^4.7.2",
     "prop-types": "^15.6.2",
     "react": "^16.6.3",
     "react-css-grid": "^2.0.0-0",

src/App.js

@@ -1,10 +1,12 @@
 import React, {Component} from 'react';
 import {Provider} from 'react-redux';
+import { ConnectedRouter } from 'connected-react-router'
 import './App.css';
-import {Route} from 'react-router-dom';
+import { Route, Switch } from 'react-router-dom';
 import Home from './containers/Home';
 import TopicsList from './containers/TopicsList';
 import store from './store/configureStore';
+import history from './history';
 import Header from "./components/Header";
 import Footer from "./components/Footer";
 import Search from "./components/Search";
@@ -13,18 +15,23 @@ import Video from "./containers/Video";
 
 class App extends Component {
   render() {
+    console.log('store', history, store);
     return (
       <Provider store={store}>
-
+        <ConnectedRouter history={ history }>
           <div className="App">
+
             <Header/>
             <Search/>
+            <Switch>
               <Route exact={true} path="/" component={Home}/>
               <Route path="/topics" component={TopicsList}/>
               <Route path="/videos/:videoId" component={Video}/>
+            </Switch>
             <Nav/>
             <Footer/>
           </div>
+        </ConnectedRouter>
       </Provider>
     );
   }

src/history.js

@@ -0,0 +1,5 @@
+import { createBrowserHistory } from 'history';
+
+const history = createBrowserHistory();
+
+export default history;

src/index.js

@@ -3,12 +3,9 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
-import { BrowserRouter } from 'react-router-dom';
 
 ReactDOM.render(
-  <BrowserRouter>
+  <App />,
-    <App />
-  </BrowserRouter>,
   document.getElementById('root')
 );
 

src/reducers/index.js

@@ -2,10 +2,10 @@ import { combineReducers } from 'redux';
 
 import TopicsReducer from './topics';
 import VideosReducer from './videos';
+import { connectRouter } from 'connected-react-router'
 
-const rootReducer = combineReducers({
+export default (history) => combineReducers({
+  router: connectRouter(history),
   topics: TopicsReducer,
   videos: VideosReducer
 });
-
-export default rootReducer;

src/store/configureStore.js

@@ -1,5 +1,7 @@
-import { createStore, applyMiddleware } from 'redux';
+import { createStore, applyMiddleware, compose } from 'redux';
 import thunk from 'redux-thunk';
+import history from '../history';
+import { routerMiddleware } from 'connected-react-router'
 import rootReducer from '../reducers';
 import getInitialState from '../utils/get-initial-state';
 
@@ -8,7 +10,10 @@ const initialState = getInitialState();
 const store = createStore(
   rootReducer,
   initialState,
+  compose(
+    routerMiddleware(history),
     applyMiddleware(thunk)
+  )
 );
 
 export default store;

yarn.lock

@@ -2004,6 +2004,13 @@ connect-history-api-fallback@^1.3.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.5.0.tgz#b06873934bc5e344fef611a196a6faae0aee015a"
 
+connected-react-router@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/connected-react-router/-/connected-react-router-5.0.1.tgz#8379854fad7e027b1e27652c00ad534f8ad244b3"
+  dependencies:
+    immutable "^3.8.1"
+    seamless-immutable "^7.1.3"
+
 console-browserify@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.1.0.tgz#f0241c45730a9fc6323b206dbf38edc741d0bb10"
@@ -3950,6 +3957,10 @@ immer@1.7.2:
   version "1.7.2"
   resolved "https://registry.yarnpkg.com/immer/-/immer-1.7.2.tgz#a51e9723c50b27e132f6566facbec1c85fc69547"
 
+immutable@^3.8.1:
+  version "3.8.2"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3"
+
 import-cwd@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
@@ -7349,6 +7360,10 @@ schema-utils@^1.0.0:
     ajv-errors "^1.0.0"
     ajv-keywords "^3.1.0"
 
+seamless-immutable@^7.1.3:
+  version "7.1.4"
+  resolved "https://registry.yarnpkg.com/seamless-immutable/-/seamless-immutable-7.1.4.tgz#6e9536def083ddc4dea0207d722e0e80d0f372f8"
+
 select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"