From d55e34abb0d081b22302312fd41d40eed45a9c85 Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Tue, 12 Dec 2017 18:06:27 -0800 Subject: [PATCH] Copy tweaks --- docs/docs/creating-and-modifying-pages.md | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/docs/docs/creating-and-modifying-pages.md b/docs/docs/creating-and-modifying-pages.md index 3b2e969a1bda9..df9a46d9042d1 100644 --- a/docs/docs/creating-and-modifying-pages.md +++ b/docs/docs/creating-and-modifying-pages.md @@ -162,7 +162,9 @@ exports.onCreatePage = async ({ page, boundActionCreators }) => { ### Client Route Params -In order to make a "detail" page at `/widgets/view/ID` resolve and extract the `ID` param, we will need to configure client only routes. +Gatsby can create client-only routes which take paramaters. + +We'll walk quickly through how to setup a route on your site like `/widgets/view/ID`. **Build config:** @@ -173,6 +175,7 @@ exports.onCreatePage = async ({ page, boundActionCreators }) => { const { createPage } = boundActionCreators; return new Promise((resolve, reject) => { + // Add client route for all paths matching `/view/*` if (/view/.test(page.path)) { // Gatsby paths have a trailing `/` page.matchPath = `${page.path}:id`; @@ -186,9 +189,9 @@ exports.onCreatePage = async ({ page, boundActionCreators }) => { **Server:** -When creating links to these view/id pages using react router or any pushstate the pages will resolve until the user hard refreshes the page. This is due to your backend server not knowing how to handle the route. +Links to these pages will work well client-side but fail if a user tries to visit a page directly (i.e. load the page from the server). This is due to your backend server not knowing how to handle the route. -Configuration is going to be required to make these pages work on production. Results may vary depending on deployment but a simple use case for NGINX: +Some server configuration is required to make these types of pages work in production. This configuration will vary depending on your server environment but here's a simple example configuration for NGINX: ``` location ~ "([a-z]*)\/view\/(\d*)$" { @@ -200,7 +203,7 @@ This directive will provide the `widgets/view/index.html` file for any request l **Client:** -Extracting path params from the route on the client requires that you add a `react-router` `` in your component. +Extracting path params from the route on the client requires that you use the `react-router` `` in your component. This can be made simpler by using a HOC: