diff --git a/docs/page-api.md b/docs/page-api.md
index e86ec3fc9..ab18aefc1 100644
--- a/docs/page-api.md
+++ b/docs/page-api.md
@@ -87,7 +87,7 @@ This `next function may be used to call the default implementation of the
function in question.
`handleRoute(request:Request, loader:Loader, next: Function), optional:
-{code?: int, location?: String, page?:Page} | Promise({code?: int, location?:
+{code?: int, location?: String, page?:Page, hasDocument?: boolean} | Promise({code?: int, location?:
String, page?:Page})`
* This method is called before any of the other methods, and its purpose is to
@@ -103,6 +103,10 @@ String, page?:Page})`
results in HTML and late arrival of HTTP responses that occur after a
rendering timeout.
+* If an error code is returned, and a custom page needs to be presented to the user,
+ an additional property `hasDocument` with value `true` can be returned:
+ `{code: 404, hasDocument: true}`.
+
* If the `code` is 301 or 302, then it must also return a `location` String to
tell the browser where to redirect.
diff --git a/packages/react-server-examples/bike-share/components/error.js b/packages/react-server-examples/bike-share/components/error.js
new file mode 100644
index 000000000..638dc63da
--- /dev/null
+++ b/packages/react-server-examples/bike-share/components/error.js
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default () => {
+ return (
404 - The page you were looking for was not found.
);
+};
diff --git a/packages/react-server-examples/bike-share/pages/not-found.js b/packages/react-server-examples/bike-share/pages/not-found.js
new file mode 100644
index 000000000..e582c7054
--- /dev/null
+++ b/packages/react-server-examples/bike-share/pages/not-found.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import {RootElement} from 'react-server';
+
+import Header from '../components/header';
+import Footer from '../components/footer';
+import Error from '../components/error';
+
+import '../styles/index.scss';
+
+export default class NotFoundPage {
+ handleRoute () {
+ return {code: 404, hasDocument: true};
+ }
+
+ getElements () {
+ return [
+
+
+ ,
+
+
+ ,
+
+
+ ,
+ ]
+ }
+
+ getBodyClasses() {
+ return ['page-body'];
+ }
+}
diff --git a/packages/react-server-examples/bike-share/routes.js b/packages/react-server-examples/bike-share/routes.js
index da00a2734..06a9eefa2 100644
--- a/packages/react-server-examples/bike-share/routes.js
+++ b/packages/react-server-examples/bike-share/routes.js
@@ -13,5 +13,9 @@ module.exports = {
method: 'get',
page: './pages/network',
},
+ NotFoundPage: {
+ path: '/(.*)',
+ page: './pages/not-found.js',
+ },
},
};
diff --git a/packages/react-server-examples/bike-share/styles/base.scss b/packages/react-server-examples/bike-share/styles/base.scss
index 6b0666963..6ec244033 100644
--- a/packages/react-server-examples/bike-share/styles/base.scss
+++ b/packages/react-server-examples/bike-share/styles/base.scss
@@ -24,3 +24,7 @@ a {
.footer {
padding: 2rem 0rem 0rem;
}
+
+.error {
+ color: red;
+}