🔥

src/routes/notFound/NotFound.css

@@ -0,0 +1,12 @@
+@import '../../components/variables.css';
+
+.root {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.container {
+  margin: 0 auto;
+  padding: 0 0 40px;
+  max-width: var(--max-content-width);
+}

src/routes/notFound/NotFound.js

@@ -0,0 +1,22 @@
+import React, { PropTypes } from 'react';
+import withStyles from 'isomorphic-style-loader/lib/withStyles';
+import s from './NotFound.css';
+
+class NotFound extends React.Component {
+  static propTypes = {
+    title: PropTypes.string.isRequired,
+  };
+
+  render() {
+    return (
+      <div className={s.root}>
+        <div className={s.container}>
+          <h1>{this.props.title}</h1>
+          <p>Sorry, the page you were trying to view does not exist.</p>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default withStyles(s)(NotFound);

src/routes/notFound/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import Layout from '../../components/Layout';
+import NotFound from './NotFound';
+
+const title = 'Page Not Found';
+
+export default {
+
+  path: '*',
+
+  action() {
+    return {
+      title,
+      component: <Layout><NotFound title={title} /></Layout>,
+      status: 404,
+    };
+  },
+
+};