Hosting a React app with React Router on a static server

Question

Situation:

• I'm building a React app with React Router.
• It was generated from create-react-app.
• I need to host it statically.
• If I visit the home page first and then click around, everything works fine.

Problem:

• When visiting a sub page directly such as https://www.example.com/path/page server returns 404 error because /path/page is not a valid directory on the server.
• For as far as I can tell, the server is just serving up files statically, and I cannot change how the server is written (I know I could solve this problem by routing all accesses to the react app with some server code, but this is not an option).
• How can I make all urls directly visitable by only changing code in my react app?

Answer 1

After some research, I figured out that what I needed was a static site generator.

There are a couple of options available that works with React.js

• React Static
• Gatsby
• Next JS

Some useful articles on getting started:

For Gatsby: https://medium.com/codingthesmartway-com-blog/gatsby-static-site-generator-for-react-introduction-b9fce7df6b24

For React Static: https://medium.com/@tannerlinsley/%EF%B8%8F-introducing-react-static-a-progressive-static-site-framework-for-react-3470d2a51ebc