Gh-pages deployment problems with react-router

[rockchalkwushock]

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 (#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!

[rockchalkwushock]

@gaearon

Worked perfectly using process.env.PUBLIC_URL + '/'. Noticed my Page404 will show up on a wrong route but the redirect button doesn't work. I think I will read up on how to make custom 404's through gh-pages and figure out how to integrate that.

Thanks for the help!

[gaearon]

@rockchalkwushock After you figure out, would you mind sending a PR to User Guide to make this experience better for the next person?

[rockchalkwushock]

@gaearon sorry for the late response I never got a notification on this. Sure thing I will try and do so this evening.

[Kritika2808]

Thank you so much for the solution @gaearon

[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>

[sam-at-work]

@willdurand your solution is (for react-router users) is the best one. You should make a PR to User Guide for it

[newswim]

If anyone got here via searching for reach-router, follow Dan's earlier post (#1765 (comment)).

For any Link element, prefix the route:

<Link to={process.env.PUBLIC_URL + '/'}>

Likewise for Route's:

<Route path={process.env.PUBLIC_URL + '/'}>

[nathanchapman]

None of the suggestions here worked for me (using a custom domain). But I finally found this, which worked for both Netlify and gh-pages:
https://hugogiraudel.com/2017/05/13/using-create-react-app-on-netlify/

I just needed to change the build script to copy the index into the 404 page that gets served:

"build": "react-scripts build && cp build/index.html build/404.html",

Hope this helps someone else out there.

[KrisBierma]

@nathanchapman Yay!!! I've been searching for hours and this is the only thing that's worked! Thanks