Implement React [email protected]

package.json

@@ -35,8 +35,8 @@
     "react": "15.4.1",
     "react-dom": "15.4.1",
     "react-redux": "5.0.1",
-    "react-router": "3.0.0",
-    "react-router-redux": "4.0.7",
+    "react-router-dom": "4.0.0",
+    "react-router-redux": "5.0.0-alpha.3",
     "redux": "3.6.0",
     "redux-thunk": "2.1.0"
   },
@@ -66,6 +66,7 @@
     "eslint-watch": "2.1.14",
     "extract-text-webpack-plugin": "^2.1.0",
     "file-loader": "0.9.0",
+    "history": "4.6.0",
     "html-webpack-plugin": "2.24.1",
     "identity-obj-proxy": "3.0.0",
     "jest": "18.1.0",

src/components/AboutPage.js

@@ -1,5 +1,7 @@
 import React from 'react';
-import {Link} from 'react-router';
+
+// Link is no longer a part of the 'react-router v4 API'
+import { Link } from 'react-router-dom';
 import '../styles/about-page.css';
 
 // Since this component is simple and static, there's no parent container for it.

src/components/App.js

@@ -1,20 +1,37 @@
 import React, { PropTypes } from 'react';
-import { Link, IndexLink } from 'react-router';
+import { Route } from 'react-router';
+import { Switch, NavLink } from 'react-router-dom';
+// 'Switch' & 'NavLink' imports have moved from the 'react-router' API to 'react-router-dom' since rrV4;
+// Also, IndexLink is replaced by NavLink with the activeStyle attr.
+// Switch is required for NotFoundPage to be the last case scenario.
+
+import HomePage from './HomePage';
+import FuelSavingsPage from '../containers/FuelSavingsPage'; // eslint-disable-line import/no-named-as-default
+import AboutPage from './AboutPage';
+import NotFoundPage from './NotFoundPage';
 
 // This is a class-based component because the current
 // version of hot reloading won't hot reload a stateless
 // component at the top-level.
+
 class App extends React.Component {
   render() {
+    const activeStyle = { color: 'blue' };
     return (
       <div>
-        <IndexLink to="/">Home</IndexLink>
-        {' | '}
-        <Link to="/fuel-savings">Demo App</Link>
-        {' | '}
-        <Link to="/about">About</Link>
-        <br/>
-        {this.props.children}
+        <div>
+          <NavLink exact to="/" activeStyle={activeStyle}>Home</NavLink>
+          {' | '}
+          <NavLink to="/fuel-savings" activeStyle={activeStyle}>Demo App</NavLink>
+          {' | '}
+          <NavLink to="/about" activeStyle={activeStyle}>About</NavLink>
+        </div>
+        <Switch>
+          <Route exact path="/" component={HomePage} />
+          <Route path="/fuel-savings" component={FuelSavingsPage} />
+          <Route path="/about" component={AboutPage} />
+          <Route component={NotFoundPage} />
+        </Switch>
       </div>
     );
   }

src/components/HomePage.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Link} from 'react-router';
+import { Link } from 'react-router-dom';
 
 const HomePage = () => {
   return (
@@ -8,7 +8,7 @@ const HomePage = () => {
 
       <h2>Get Started</h2>
       <ol>
-        <li>Review the <Link to="fuel-savings">demo app</Link></li>
+        <li>Review the <Link to="/fuel-savings">demo app</Link></li>
         <li>Remove the demo and start coding: npm run remove-demo</li>
       </ol>
     </div>

src/components/NotFoundPage.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 
 const NotFoundPage = () => {
   return (

src/components/Root.js

@@ -1,20 +1,22 @@
 import React, { Component, PropTypes } from 'react';
 import { Provider } from 'react-redux';
-import routes from '../routes';
-import { Router } from 'react-router';
+import { ConnectedRouter } from 'react-router-redux';
+import App from './App';
 
 export default class Root extends Component {
   render() {
     const { store, history } = this.props;
     return (
       <Provider store={store}>
-        <Router history={history} routes={routes} />
+        <ConnectedRouter history={history}>
+          <App />
+        </ConnectedRouter>
       </Provider>
     );
   }
 }
 
 Root.propTypes = {
   store: PropTypes.object.isRequired,
-  history: PropTypes.object.isRequired
+  history: PropTypes.object.isRequired,
 };

src/index.js

@@ -2,21 +2,16 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import { browserHistory } from 'react-router';
 import { AppContainer } from 'react-hot-loader';
-import Root from './components/Root';
 
-import configureStore from './store/configureStore';
+// importing 'history' since it must be the same instance as that passed to redux middleware.
+import configureStore, { history } from './store/configureStore';
+import Root from './components/Root';
 require('./favicon.ico'); // Tell webpack to load favicon.ico
 import './styles/styles.scss'; // Yep, that's right. You can import SASS/CSS files too! Webpack will run the associated loader and plug this into the page.
-import { syncHistoryWithStore } from 'react-router-redux';
 
 const store = configureStore();
 
-// Create an enhanced history that syncs navigation events with the store
-const history = syncHistoryWithStore(browserHistory, store);
-
-
 render(
   <AppContainer>
     <Root store={store} history={history} />

src/reducers/index.js

@@ -1,6 +1,6 @@
 import { combineReducers } from 'redux';
 import fuelSavings from './fuelSavingsReducer';
-import {routerReducer} from 'react-router-redux';
+import { routerReducer } from 'react-router-redux';
 
 const rootReducer = combineReducers({
   fuelSavings,

src/store/configureStore.js

@@ -1,15 +1,20 @@
 import {createStore, compose, applyMiddleware} from 'redux';
 import reduxImmutableStateInvariant from 'redux-immutable-state-invariant';
 import thunk from 'redux-thunk';
+import createHistory from 'history/createBrowserHistory';
+// 'routerMiddleware': the new way of storing route changes with redux middlware since rrV4.
+import { routerMiddleware } from 'react-router-redux';
 import rootReducer from '../reducers';
-
+export const history = createHistory();
 function configureStoreProd(initialState) {
+  const reactRouterMiddleware = routerMiddleware(history);
   const middlewares = [
     // Add other middleware on this line...
 
     // thunk middleware can also accept an extra argument to be passed to each thunk action
     // https://github.com/gaearon/redux-thunk#injecting-a-custom-argument
     thunk,
+    reactRouterMiddleware,
   ];
 
   return createStore(rootReducer, initialState, compose(
@@ -19,6 +24,7 @@ function configureStoreProd(initialState) {
 }
 
 function configureStoreDev(initialState) {
+  const reactRouterMiddleware = routerMiddleware(history);
   const middlewares = [
     // Add other middleware on this line...
 
@@ -28,6 +34,7 @@ function configureStoreDev(initialState) {
     // thunk middleware can also accept an extra argument to be passed to each thunk action
     // https://github.com/gaearon/redux-thunk#injecting-a-custom-argument
     thunk,
+    reactRouterMiddleware,
   ];
 
   const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; // add support for Redux dev tools
@@ -49,4 +56,4 @@ function configureStoreDev(initialState) {
 
 const configureStore = process.env.NODE_ENV === 'production' ? configureStoreProd : configureStoreDev;
 
-export default configureStore;
+export default configureStore;