Gh-pages deployment problems with react-router

Added 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

[gaearon]

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 /. Only https://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 on npm start because the development server serves from /.

Two solutions:

1. Don’t use HTML5 history on GitHub pages. Use hashHistory instead. Your URLs will look like https://rockchalkwushock.github.io/rcws-development/#path/inside/the/app.

2. 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 and rcws-development (inferred from homepage) 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 at localhost:3000/rcws-development even locally so you’d bump into this issue earlier (and would have to use process.env.PUBLIC_URL in route definitions anyway). But we have not really decided on this yet.

Hope this helps!

[willdurand]

I know I am a bit late here but the BrowserRouter has a basename prop that can be used for that: https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string.

<BrowserRouter basename={process.env.PUBLIC_URL}>
  {/* routes */}
</BrowserRouter>