Question about 404 with React Router

[adrice727]

I have a project with react-router which is working fine locally. However, I'm having issues with the heroku instance. If I go directly to any route other than /, I get a 404. I'm not sure what's going on, but figured this might be a good place to ask.

Edit: I suppose this is the issue.

[mars]

Yes @adrice727 you're on the right track. I documented the solution to using react-router's browserHistory in the README.

[mars]

Perhaps I should have asked first, are you using react-router's default hashHistory, or did you create the Router instance with browserHistory?

[adrice727]

I was just about to close this since I finally bothered to look at the README. Sorry for creating this issue for no reason. browserHistory is now working just fine. Thanks.

[rokit]

I can't get this to work with v4. They have replaced browserHistory with BrowserRouter.

[mars]

Hi @rokit,

First of all, does it work locally when you run your app with the development push state server as directed from the create-react-app build log?

npm install -g pushstate-server
pushstate-server build
open http://localhost:9000

Once you have it working locally, then commit changes to static.json to pass through all requests to the browser; config for "Routing Clean URLs":

{
  "root": "build/",
  "clean_urls": false,
  "routes": {
    "/**": "index.html"
  }
}

This request pass-through is separate from the JavaScript/React routing library, where the full URL must be matched/handled/routed within the app.

Deploy the app with these changes and hopefully it works 🍀

If you're still experiencing errors using the new Router v4, then please seek help in the React Router community or open a new "Problems with React Router v4" issue here with as much information as possible (static.json config, errors, example app, access to source code) to help me reproduce/understand the problem.

[rokit]

Sorry, I had accidentally put the static.json in the src folder rather than the root. It did work when I tried your suggestion to use pushstate-server, though.

[mars]

@jackrobertscott, your solution is incorrect in this context, this Heroku buildpack. To avoid misleading folks, I’m going to delete the comment.

To solve this issue with this buildpack, use the built-in server-side routing:
https://github.com/mars/create-react-app-buildpack/blob/master/README.md#user-content-routing-clean-urls

[ichthub]

I have the same issue but non of this worked for me @mars . after
npm install -g pushstate-server
pushstate-server build
open http://localhost:9000
I got error can not get /

[mars]

@ichthub sounds like you are trying to run locally? Do npm start.

See the create-react-app docs for more about development process.

[bgwaltney]

I know this is a bit old, but I had a real hard time getting this to work correctly in my production build on Heroku. What worked for me was moving static.json (see below) from the public folder to the root directory. Now when I deploy and go to any valid route it renders it correctly instead of an nginx 404 page.

{ "root": "build/", "error_page": "error.html", "clean_urls": false, "https_only": true, "routes": { "/**": "index.html" } }

[mars]

Yes indeed @bgwaltney, the static.json file must be at the root of the repo for the buildpack to recognize it.

Was there something you read that indicated to put it in public/?

I just revised the README to clarify this point. Hopefully will help others avoid this mistake.

[bgwaltney]

@mars I certainly did read it somewhere, but I probably googled this 100 different ways and can't find it. Now that the readme makes it clear users shouldn't have an issue. Thanks for the crazy fast response :)