feat: migrate to react-router v4

Author: antonfisher

.eslintrc

@@ -21,20 +21,21 @@
     "react"
   ],
   "rules": {
-    "no-console": 0,
-    "no-plusplus": 0,
-    "comma-dangle": 0,
     "arrow-parens": 0,
+    "comma-dangle": 0,
     "global-require": 0,
-    "no-param-reassign": 0,
+    "import/no-named-as-default": 0,
     "max-len": ["error", 120],
+    "no-console": 0,
+    "no-param-reassign": 0,
+    "no-plusplus": 0,
     "no-restricted-syntax": 0,
-    "object-curly-spacing": 0,
     "no-underscore-dangle": 0,
-    "import/no-named-as-default": 0,
+    "object-curly-spacing": 0,
     "react/forbid-prop-types": 0,
     "react/jsx-filename-extension": 0,
-    "react/prefer-stateless-function": 0 //enable
+    "react/prefer-stateless-function": 0, //enable later
+    "spaced-comment": 0
   },
   "settings": {
     "import/resolver": {

README.md

@@ -4,17 +4,21 @@ React boilerplate with ES2015, Express.js, and Webpack 2
 [![Dependency Status](https://dependencyci.com/github/antonfisher/react-express-webpack2/badge)](https://dependencyci.com/github/antonfisher/react-express-webpack2)
 [![bitHound Overall Score](https://www.bithound.io/github/antonfisher/react-express-webpack2/badges/score.svg)](https://www.bithound.io/github/antonfisher/react-express-webpack2)
 
-## Technologies:
+## Technologies
 
-- React
-- React Router
-- ES2015
+- React (v15)
+- React Router (v4)
+- ES2015+
 - Webpack 2 (production and development configurations)
-- React Hot Loader
+- React Hot Loader (v3-beta)
 - Express.js as production and development server
 - SCSS support (+ sanitize.css included)
 - React Material UI example theme
 - ESLint
 
-## ToDo:
+## Features
+- preconfigured router
+- preconfigured modal windows
+
+## ToDo
 - [ ] tests

config/webpack.config.base.js

@@ -14,6 +14,7 @@ module.exports = {
     app: './src/client/index.js',
     vendor: [
       'babel-polyfill',
+      'history',
       'immutable',
       'material-ui',
       'prop-types',
@@ -22,7 +23,7 @@ module.exports = {
       'react-hot-loader',
       'react-intl',
       'react-redux',
-      'react-router',
+      'react-router-dom',
       'react-router-redux',
       'react-tap-event-plugin',
       'redux',

package.json

@@ -46,6 +46,7 @@
     "body-parser": "1.17.1",
     "compression": "1.6.2",
     "express": "4.15.2",
+    "history": "4.6.1",
     "immutable": "3.8.1",
     "material-ui": "0.17.4",
     "prop-types": "15.5.8",
@@ -54,7 +55,7 @@
     "react-hot-loader": "3.0.0-beta.6",
     "react-intl": "2.2.3",
     "react-redux": "5.0.4",
-    "react-router": "3.0.2",
+    "react-router-dom": "4.1.1",
     "react-router-redux": "4.0.8",
     "react-tap-event-plugin": "2.0.1",
     "redux": "3.6.0",

src/client/components/NavigationButton/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Link} from 'react-router';
+import {NavLink} from 'react-router-dom';
 import {lightGreen600} from 'material-ui/styles/colors';
 
 import FlatButton from '../FlatButton';
@@ -22,11 +22,11 @@ class NavigationButton extends React.Component {
     const buttonStyle = {color: 'white', marginLeft: 0, marginRight: 1};
 
     return (
-      <Link to={to} onlyActiveOnIndex={to === '/'} activeStyle={activeStyle}>
+      <NavLink to={to} activeStyle={activeStyle}>
         <FlatButton label={label} style={buttonStyle}>
           {React.Children.toArray(this.props.children)}
         </FlatButton>
-      </Link>
+      </NavLink>
     );
   }
 }

src/client/containers/App/index.js

@@ -1,16 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
+import {Redirect, Route, Switch} from 'react-router-dom';
 import Paper from 'material-ui/Paper';
+
 import AppBar from '../AppBar';
-import ProgressBar from '../../components/ProgressBar';
 import AppMenu from '../AppMenu';
 import ModalsLayout from '../ModalsLayout';
+import NotFound from '../NotFound';
+import ServersPage from '../ServersPage';
+import ProgressBar from '../../components/ProgressBar';
 
 export class App extends React.Component {
   static propTypes = {
-    loading: PropTypes.bool.isRequired,
-    children: PropTypes.node.isRequired
+    loading: PropTypes.bool.isRequired
   };
 
   render() {
@@ -25,7 +28,11 @@ export class App extends React.Component {
           {loading && <ProgressBar />}
         </Paper>
         <section style={{paddingTop: 50}}>
-          {React.Children.toArray(this.props.children)}
+          <Switch>
+            <Route path="/servers" component={ServersPage} />
+            <Route path="/users" name="home-users" component={NotFound} />
+            <Redirect to="/servers" />
+          </Switch>
         </section>
         <ModalsLayout />
       </section>

src/client/containers/AppBar/index.js

@@ -20,7 +20,7 @@ export default class AppBar extends React.Component {
       <Toolbar>
         <ToolbarGroup style={{paddingLeft: 20}} firstChild>
           <AirplanemodeActiveIcon color="white" style={{height: 40, width: 40, marginRight: 30}} />
-          <NavigationButton to="/" label="Servers" />
+          <NavigationButton to="/servers" label="Servers" />
           <NavigationButton to="/users" label="Users" />
         </ToolbarGroup>
         <ToolbarGroup>

src/client/containers/LoginForm/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Link} from 'react-router';
+import {Link} from 'react-router-dom';
 import Dialog from 'material-ui/Dialog';
 import RaisedButton from 'material-ui/RaisedButton';
 
@@ -15,7 +15,7 @@ export default class LoginForm extends React.Component {
 
   render() {
     const actions = [
-      <Link to="/">
+      <Link to="/servers">
         <RaisedButton label="Ok" secondary keyboardFocused />,
       </Link>
     ];

src/client/index.js

@@ -5,10 +5,10 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import {Provider} from 'react-redux';
 import {IntlProvider} from 'react-intl';
-import {browserHistory} from 'react-router';
 import {AppContainer} from 'react-hot-loader';
 import {syncHistoryWithStore} from 'react-router-redux';
 import injectTapEventPlugin from 'react-tap-event-plugin';
+import createBrowserHistory from 'history/createBrowserHistory';
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
 
 // global styles
@@ -24,7 +24,7 @@ injectTapEventPlugin();
 
 api.setEndpoint('/api');
 
-const history = syncHistoryWithStore(browserHistory, store);
+const history = syncHistoryWithStore(createBrowserHistory(), store);
 
 const render = (AppRouter) => {
   ReactDOM.render(

src/client/router.js

@@ -1,20 +1,16 @@
 import React from 'react';
-import {Router, Route, IndexRoute} from 'react-router';
+import {BrowserRouter, Route, Switch} from 'react-router-dom';
 
 import App from './containers/App';
 import LoginForm from './containers/LoginForm';
-import NotFound from './containers/NotFound';
-import ServersPage from './containers/ServersPage';
 
 export default function ({history}) { // eslint-disable-line react/prop-types
   return (
-    <Router history={history}>
-      <Route path="/" name="home" component={App}>
-        <IndexRoute component={ServersPage} />
-        <Route path="/users" name="home-users" component={NotFound} />
-      </Route>
-      <Route path="/login" name="login" component={LoginForm} />
-      <Route path="*" name="notFound" component={NotFound} />
-    </Router>
+    <BrowserRouter history={history}>
+      <Switch>
+        <Route path="/login" name="login" component={LoginForm} />
+        <Route path="/" name="home" component={App} />
+      </Switch>
+    </BrowserRouter>
   );
 }