Gh-pages deployment problems with react-router
See original GitHub issueAdded react-router
and just a Home
page and Page404
to the router. When I navigate to the declared homepage: https://rockchalkwushock.github.io/rcws-development/
I am first being directed to my Page404
.
I thought that it was possibly because in the router I have 2 paths /
& *
:
export default () => (
<Router history={browserHistory} onUpdate={logPageView}>
<Route path='/' component={App}>
<IndexRoute component={Home} />
</Route>
<Route path='*' component={Page404} />
</Router>
);
Seeing that my homepage
is pointing to /rcws-development/
I thought perhaps this was the issue; because when I use the redirect button on the Page404
I’m sent to https://rockchalkwushock.github.io/
. So I changed my homepage: https://rockchalkwushock.github.io/
but no such luck. I then get Github’s 404.
I followed the instructions from the README and went to the following repository after reading that gh-pages does not natively support front-end routing. However I still am first being directed to my Page404
upon visiting the website.
Any ideas why this is? Link to repo
Issue Analytics
- State:
- Created 7 years ago
- Reactions:11
- Comments:10 (2 by maintainers)
The
homepage
setting only affects paths to JS and CSS in the produced HTML. It can’t affect your routing configuration.path='/'
in your router configuration means you’re literally matching/
. Onlyhttps://rockchalkwushock.github.io/
would match/
.But your project is on
/rcws-development/
. However if you change the routing configuration to say/rcws-development/
then this won’t work in development onnpm start
because the development server serves from/
.Two solutions:
Don’t use HTML5 history on GitHub pages. Use
hashHistory
instead. Your URLs will look likehttps://rockchalkwushock.github.io/rcws-development/#path/inside/the/app
.Use
process.env.PUBLIC_URL
in your route definitions so that they work both in development and after deployment. For example:<Route path={process.env.PUBLIC_URL + '/'}>
. This will be empty in development andrcws-development
(inferred fromhomepage
) in production.In the future, we might flip the development server to also take
homepage
into account (https://github.com/facebookincubator/create-react-app/issues/1582). If this happens, your project would get served atlocalhost:3000/rcws-development
even locally so you’d bump into this issue earlier (and would have to useprocess.env.PUBLIC_URL
in route definitions anyway). But we have not really decided on this yet.Hope this helps!
I know I am a bit late here but the
BrowserRouter
has abasename
prop that can be used for that: https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string.