diff --git a/server/index.js b/server/index.js
index e531dc27..31db3a30 100644
--- a/server/index.js
+++ b/server/index.js
@@ -151,7 +151,12 @@ app.get('*', (req, res) => {
const html = render(req.url, context, preloadedState);
if (context.url) {
+ // React Router injects the context.url if a redirect was rendered
res.redirect(context.url);
+ } else if (context.notfound) {
+ // NotFoundPage component injects the context.notfound when a
+ // 404 should be returned
+ res.status(404).send(html);
} else {
res.send(html);
}
diff --git a/src/containers/NotFoundPage/NotFoundPage.js b/src/containers/NotFoundPage/NotFoundPage.js
index 58f422fe..f0df9d3c 100644
--- a/src/containers/NotFoundPage/NotFoundPage.js
+++ b/src/containers/NotFoundPage/NotFoundPage.js
@@ -1,9 +1,31 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import { PageLayout } from '../../components';
+import React, { Component, PropTypes } from 'react';
+import { withRouter } from 'react-router-dom';
+import { PageLayout, NamedLink } from '../../components';
-export default () => (
-
- Index page
-
-);
+export class NotFoundPageComponent extends Component {
+ componentWillMount() {
+ // The StaticRouter component used in server side rendering
+ // provides the context object. We attach a `notfound` flag to
+ // the context to tell the server to change the response status
+ // code into a 404.
+ this.props.staticContext.notfound = true;
+ }
+ render() {
+ return (
+
+ Home
+
+ );
+ }
+}
+
+NotFoundPageComponent.defaultProps = { staticContext: {} };
+
+const { object } = PropTypes;
+
+NotFoundPageComponent.propTypes = {
+ // context object from StaticRouter, injected by the withRouter wrapper
+ staticContext: object,
+};
+
+export default withRouter(NotFoundPageComponent);
diff --git a/src/containers/NotFoundPage/NotFoundPage.test.js b/src/containers/NotFoundPage/NotFoundPage.test.js
index b34e1278..4e75fe9d 100644
--- a/src/containers/NotFoundPage/NotFoundPage.test.js
+++ b/src/containers/NotFoundPage/NotFoundPage.test.js
@@ -1,10 +1,11 @@
import React from 'react';
-import { renderShallow } from '../../util/test-helpers';
-import NotFoundPage from './NotFoundPage';
+import { StaticRouter } from 'react-router-dom';
+import { renderShallow, renderDeep } from '../../util/test-helpers';
+import { NotFoundPageComponent } from './NotFoundPage';
describe('NotFoundPage', () => {
it('matches snapshot', () => {
- const tree = renderShallow();
+ const tree = renderShallow();
expect(tree).toMatchSnapshot();
});
});
diff --git a/src/containers/NotFoundPage/__snapshots__/NotFoundPage.test.js.snap b/src/containers/NotFoundPage/__snapshots__/NotFoundPage.test.js.snap
index 0a3865c6..7b0aabf7 100644
--- a/src/containers/NotFoundPage/__snapshots__/NotFoundPage.test.js.snap
+++ b/src/containers/NotFoundPage/__snapshots__/NotFoundPage.test.js.snap
@@ -1,10 +1,9 @@
exports[`NotFoundPage matches snapshot 1`] = `
-
- Index page
-
+
+ Home
+
`;