Document hasDocument option (#893)

* Add custom 404 page to the bike-share example

* Move code to error component

* Document hasDocument property

* Adjust indent

* Update page-api.md

* Convert spaces to tabs

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.
 

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