fix: error page rendering and route

Author: calvinl

common/js/components/common/index.js

@@ -1,4 +1,3 @@
-export { default as ErrorPage } from './ErrorPage';
 export { default as Footer } from './Footer';
 export { default as Header } from './Header';
 export { default as Loading } from './Loading';

common/js/components/common/ErrorPage/index.js renamed to common/js/pages/Error/index.js

@@ -1,8 +1,3 @@
-/**
- * 404.js
- * Renders a 404 page.
- */
-
 import React from 'react';
 import PropTypes from 'prop-types';
 

common/js/routes/index.js

@@ -1,17 +1,9 @@
-'use strict';
-
+import Error from '@pages/Error';
 import Home from '@pages/Home';
 import Todos from '@pages/Todos';
 
 export default [
-  {
-    path: '/',
-    exact: true,
-    component: Home
-  },
-  {
-    path: '/todos',
-    exact: true,
-    component: Todos
-  }
+  { path: '/', exact: true, component: Home },
+  { path: '/todos', exact: true, component: Todos },
+  { path: '*', component: Error }
 ];

server/renderer/handler.js

@@ -3,7 +3,6 @@ import { Provider } from 'react-redux';
 import { StaticRouter, matchPath } from 'react-router';
 import { setMobileDetect, mobileParser } from 'react-responsive-redux';
 import { renderToString } from 'react-dom/server';
-import { ErrorPage } from '@components/common';
 import { getBundles } from 'react-loadable/webpack';
 import Loadable from 'react-loadable';
 import render from './render';
@@ -25,7 +24,8 @@ if (config.enableDynamicImports) {
 }
 
 export default function handleRender(req, res) {
-  const initialState = {};
+  let context = {}, modules = [], initialState = {};
+
   // Create a new Redux store instance
   const store = configureStore(initialState);
 
@@ -82,29 +82,16 @@ export default function handleRender(req, res) {
 
   const matches = matchRoutes(routes);
 
-  // No matched route, render a 404 page.
+  // No matched route, send an error.
   if (!matches.length) {
-    res.contentType('text/html');
-    res.status(404).send(render(<ErrorPage code={404} />, finalState));
-    return;
+    return res.status(500).send('Server Error');
   }
 
-  // There's a match, render the component with the matched route, firing off
-  // any fetchData methods that are statically defined on the server.
-  const fetchData = matches.map(match => {
-    const { fetchData, ...rest } = match; // eslint-disable-line no-unused-vars
-
-    // return fetch data Promise, excluding unnecessary fetchData method
-    return match.fetchData({ store, ...rest });
-  });
-
-  let context = {}, modules = [];
-
   const getComponent = () => {
     let component = (
       <Provider store={store}>
         <StaticRouter context={context} location={req.baseUrl}>
-          <App />
+          <App  />
         </StaticRouter>
       </Provider>
     );
@@ -120,19 +107,30 @@ export default function handleRender(req, res) {
     return component;
   };
 
+  // There's a match, render the component with the matched route, firing off
+  // any fetchData methods that are statically defined on the server.
+  const fetchData = matches.map(match => {
+    const { fetchData, ...rest } = match; // eslint-disable-line no-unused-vars
+
+    // return fetch data Promise, excluding unnecessary fetchData method
+    return match.fetchData({ store, ...rest });
+  });
+
   // Execute the render only after all promises have been resolved.
   Promise.all(fetchData).then(() => {
     const state = store.getState();
     const html = renderToString(getComponent());
     const bundles = stats && getBundles(stats, modules) || [];
     const markup = render(html, state, bundles);
+    const status = matches.length && matches[0].match.path === '*' ? 404 : 200;
 
     // A 301 redirect was rendered somewhere if context.url exists after
     // rendering has happened.
     if (context.url) {
       return res.redirect(302, context.url);
     }
 
-    return res.status(200).send(markup);
+    res.contentType('text/html');
+    return res.status(status).send(markup);
   });
 }