Refactor routes, containers, and main App component for react-router v4

Author: calvinl

client/index.js

@@ -2,12 +2,12 @@ import 'babel-polyfill';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
-import { Router } from 'react-router';
-import { browserHistory } from 'react-router';
-import { syncHistoryWithStore } from 'react-router-redux';
+import { BrowserRouter } from 'react-router-dom';
+// import { browserHistory } from 'react-router';
+// import { syncHistoryWithStore } from 'react-router-redux';
 import { AppContainer } from 'react-hot-loader';
 import configureStore from 'store';
-import routes from 'routes';
+import App from 'containers/App';
 
 /* Images
  * This space is reserved for images that are required by server rendering,
@@ -22,24 +22,26 @@ const rootElement = document.getElementById('app');
 // rendering.
 const initialState = window.__INITIAL_STATE__;
 const store = configureStore(initialState);
-const history = syncHistoryWithStore(browserHistory, store);
+// const history = syncHistoryWithStore(browserHistory, store);
 
-const render = (routes) => {
+const render = (Component) => {
   ReactDOM.render(
     <Provider store={store}>
       <AppContainer>
-        <Router history={history} routes={routes} />
+        <BrowserRouter>
+          <Component />
+        </BrowserRouter>
       </AppContainer>
     </Provider>,
     rootElement
   );
 };
 
-render(routes);
+render(App);
 
 if (module.hot) {
-  module.hot.accept('../common/js/routes', () => {
-    const newRoutes = require('../common/js/routes').default;
-    render(newRoutes);
+  // We need to re-require the main App module.
+  module.hot.accept('../common/js/containers/App', () => {
+    render(require('../common/js/containers/App').default);
   });
 }

common/js/components/ErrorPage/index.js

@@ -0,0 +1,35 @@
+/**
+ * 404.js
+ * Renders a 404 page.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const ERROR_MESSAGES = {
+  404: 'The page you requested was not found.',
+  500: 'The server encountered an error.'
+};
+
+const ErrorPage = (props) => {
+  const { message } = props;
+
+  return (
+    <div>
+      <h1>Sorry!</h1>
+      <p>{message}</p>
+    </div>
+  );
+};
+
+ErrorPage.propTypes = {
+  code: PropTypes.number,
+  message: PropTypes.string
+};
+
+ErrorPage.defaultProps = {
+  code: 404,
+  message: ERROR_MESSAGES[404]
+};
+
+export default ErrorPage;

common/js/components/Header.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import css from './Header.scss';
 
 export default class Header extends Component {

common/js/components/Main.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Switch, Route } from 'react-router-dom';
+import routes from 'routes';
+
+const Main = () => (
+  <main>
+    <Switch>
+      {routes.map(route => <Route key={route.path} {...route} />)}
+    </Switch>
+  </main>
+);
+
+export default Main;

common/js/containers/App/App.dev.js

@@ -1,5 +1,28 @@
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./App.prod');
-} else {
-  module.exports = require('./App.dev');
+import React, { Component } from 'react';
+import Main from 'components/Main';
+import Header from 'components/Header';
+import Footer from 'components/Footer';
+import DevTools from 'containers/DevTools';
+
+export default class App extends Component {
+  renderDevTools = () => {
+    const { NODE_ENV, DISABLE_DEV_TOOLS } = process.env;
+
+    if (NODE_ENV === 'development' && !DISABLE_DEV_TOOLS) {
+      return <DevTools />;
+    }
+
+    return null;
+  }
+  render() {
+
+    return (
+      <div>
+        <Header />
+        <Main />
+        <Footer />
+        {this.renderDevTools()}
+      </div>
+    );
+  }
 }

common/js/containers/App/App.prod.js

@@ -2,14 +2,6 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import ExampleComponent from 'components/Example';
 
-const mapStateToProps = (state, ownProps) => {
-  return {
-    example: state.example,
-    location: ownProps.location,
-    params: ownProps.params
-  };
-};
-
 class ExampleContainer extends Component {
   render() {
     return (
@@ -21,4 +13,12 @@ class ExampleContainer extends Component {
   }
 }
 
+const mapStateToProps = (state, ownProps) => {
+  return {
+    example: state.example,
+    location: ownProps.location,
+    params: ownProps.params
+  };
+};
+
 export default connect(mapStateToProps)(ExampleContainer);

common/js/containers/App/index.js

@@ -1,10 +1,11 @@
 import React, { Component } from 'react';
+import css from './index.scss';
 
 export default class HomeContainer extends Component {
   render() {
     return (
-      <div className="home">
-        <h1>It works!</h1>
+      <div className={css.home}>
+        <h1>It Works!</h1>
       </div>
     );
   }

common/js/containers/Example.js

@@ -0,0 +1,5 @@
+.home {
+  h1 {
+    font-size: 50px;
+  }
+}