From afc9e876870fb25d61ddf61aa6d19b2ed74b18e5 Mon Sep 17 00:00:00 2001 From: Rafael Pedicini Date: Fri, 29 Jul 2016 09:44:47 -0700 Subject: [PATCH 1/2] Add note that router doesn't work with gh-pages --- template/README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/template/README.md b/template/README.md index 6572a109190..3f9c3f2ac44 100644 --- a/template/README.md +++ b/template/README.md @@ -346,6 +346,8 @@ git checkout - You may copy and paste them, or put them into a custom shell script. You may also customize them for another hosting provider. +Note that if you add a router your app won't work with GitHub Pages becasue it doesn't natively support single page apps with frontend routing (unless it's the ugly hashtag kind). There is a simple workaround for this by adding a `404.html` file with a redirect script, see [Single Page Apps for GitHub Pages](https://github.com/rafrex/spa-github-pages). + ### Something Missing? If you have ideas for more “How To” recipes that should be on this page, [let us know](https://github.com/facebookincubator/create-react-app/issues) or [contribute some!](https://github.com/facebookincubator/create-react-app/edit/master/template/README.md) From 47e1bfe7c975658d4f5303add4f655488d590720 Mon Sep 17 00:00:00 2001 From: rafrex Date: Fri, 29 Jul 2016 11:47:05 -0700 Subject: [PATCH 2/2] Update note about using router with gh-pages --- template/README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/template/README.md b/template/README.md index 3f9c3f2ac44..c01d99aebea 100644 --- a/template/README.md +++ b/template/README.md @@ -346,7 +346,9 @@ git checkout - You may copy and paste them, or put them into a custom shell script. You may also customize them for another hosting provider. -Note that if you add a router your app won't work with GitHub Pages becasue it doesn't natively support single page apps with frontend routing (unless it's the ugly hashtag kind). There is a simple workaround for this by adding a `404.html` file with a redirect script, see [Single Page Apps for GitHub Pages](https://github.com/rafrex/spa-github-pages). +Note that GitHub Pages doesn't support routers that use the HTML5 `pushState` history API under the hood (for example, React Router using `browserHistory`). This is becasue when there is a fresh page load for a url like `http://user.github.io/todomvc/todos/42`, where `/todos/42` is a frontend route, the GitHub Pages server returns 404 because it knows nothing of `/todos/42`. If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions: +* You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to `hashHistory` for this effect, but the URL will be longer and more verbose (for example, `http://user.github.io/todomvc/#/todos/42?_k=yknaj`). [Read more](https://github.com/reactjs/react-router/blob/master/docs/guides/Histories.md#histories) about different history implementations in React Router. +* Alternatively, you can use a trick to teach GitHub Pages to handle 404 by redirecting to your `index.html` page with a special redirect parameter. You would need to add a `404.html` file with the redirection code to the `build` folder before deploying your project, and you’ll need to add code handling the redirect parameter to `index.html`. You can find a detailed explanation of this technique [in this guide](https://github.com/rafrex/spa-github-pages). ### Something Missing?