Document hasDocument option

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,9 @@ 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` 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.
 

packages/react-server-examples/bike-share/components/error.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default () => {
+  return (<div className="error">404 - The page you were looking for was not found.</div>);
+};

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 [
+      <RootElement key={0}>
+        <Header/>
+      </RootElement>,
+      <RootElement key={1}>
+        <Error />
+      </RootElement>,
+      <RootElement key={2}>
+        <Footer/>
+      </RootElement>,
+    ]
+  }
+
+  getBodyClasses() {
+    return ['page-body'];
+  }
+}

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',
+	  },
 	},
 };

packages/react-server-examples/bike-share/styles/base.scss

@@ -24,3 +24,7 @@ a {
 .footer {
   padding: 2rem 0rem 0rem;
 }
+
+.error {
+  color: red;
+}