Adapting to react-mobx-router5 v 5.0.0

Check the new version: https://github.com/LeonardoGentile/react-mobx-router5/releases/tag/v5.0.0

package.json

@@ -15,10 +15,10 @@
     "mobx": "3.1.0",
     "mobx-react": "^4.1.0",
     "mobx-router5": "^3.0.0",
-    "react": "15.4.1",
-    "react-dom": "15.4.1",
-    "react-mobx-router5": "^4.0.0",
-    "router5": "^5.1.2"
+    "react": "16.0.0",
+    "react-dom": "16.0.0",
+    "react-mobx-router5": "^4.0.2",
+    "router5": "^5.3.0"
   },
   "devDependencies": {
     "autoprefixer": "^6.7.2",
@@ -44,15 +44,15 @@
     "postcss-loader": "^1.3.0",
     "react-hot-loader": "^3.0.0-beta.6",
     "sass-loader": "^6.0.2",
-    "sass-resources-loader": "^1.2.0",
-    "source-map-loader": "^0.2.1",
+    "sass-resources-loader": "^1.3.1",
+    "source-map-loader": "^0.2.2",
     "style-loader": "0.13.1",
     "url-loader": "0.5.7",
     "webpack": "2.3.2",
     "webpack-cleanup-plugin": "^0.4.2",
     "webpack-dashboard": "^0.3.0",
     "webpack-dev-server": "2.4.2",
-    "prop-types": "latest"
+    "prop-types": "^15.6.0"
   },
   "scripts": {
     "build": "webpack --config webpack.production.config.js --progress --profile --colors",

src/components/Login/Login.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import {fakeLogin, fakeLogout} from '../../actions/auth'
 import {observer, inject} from 'mobx-react';
 import styles from './Login.sass'
@@ -11,7 +12,7 @@ class Login extends React.Component {
 
   // To validate the injected store
   static propTypes = {
-    userStore: React.PropTypes.object.isRequired
+    userStore: PropTypes.object.isRequired
   };
 
   constructor(props) {

src/nodecomponents/Sections/Sections.jsx

@@ -8,7 +8,13 @@ const routeNodeName = 'section';
 class Sections extends React.Component {
   render() {
     const {route} = this.props;
-    return <RouteView route={route} routes={routes} routeNodeName={routeNodeName} />;
+    return <RouteView
+      route={route}
+      routes={routes}
+      routeNodeName={routeNodeName}
+      errorMessage={'Ooops. This is a custom error message passed to the RouteView component. The app won\'t fail in case of exception during component selection.'}
+      errorStyle={{'color': 'blue'}}
+    />;
   }
 }
 

src/routes.js

@@ -12,7 +12,7 @@ export default [
   { name: 'index', path: '/index/:id', component: Index},
   { name: 'section', path: '/section', component: Sections, children: [
     // Sections
-    { name: 'home', path: '/home', component: Home },
+    { name: 'home', path: '/home', component: null }, // route without a component, It will throw but app won't fail
     { name: 'login', path: '/login', component: Login },
     { name: 'index', path: '/index/:id', component: Index },
     { name: 'subsection', path: '/subsection', component: SubSections, children: [