react-router not working in github deployment

Question

Routing of the app

Json package

i can't figure out why it's not rendering anything and shows 404 page if i manually navigate to other page

Answer 1

I had same problem once, The problem was that my webserver was serving "index.html" only for the root route ("/")

I configured the webserver in a way that all the routes (or only the ones that you are using) will serve index.hml. Please try to check this.

Answer 2

Based on the screenshot provided, it appears that the project https://packirisamykaran.github.io/daily-thoughts is hosted using GitHub pages. React Router can be used, but you would have to switch to hashHistory instead of browserHistory so that it works with GitHub Pages.

The Notes on client-side routing from the create-react-app.dev website basically provide two options as workarounds:

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 about different history implementations in React Router.

Alternatively, you can use a trick to teach GitHub Pages to handle 404s by redirecting to your index.html page with a custom 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.

Thanks to @DrewReese, for clarifying this.