Problem: URL gets evaluated on server side
When you enter a new URL into address bar of the browser or refreshes the page, browser requests server (in this case GitHub pages server) for that URL. At this point, client side router (react-router) can’t take action as it is not yet loaded for that page. Now server looks for a route that matches
/accounts won’t find it (because routing is done on client side) and returns
If you had control over the server, you can serve
index.html for all routes.
This is explained in create react app documentation serving apps with client side routing.
As we don’t have that control in case of GitHub pages, We can try these.
With this change, your URLs will go from looking like
So it’s a bit messy.
Get GitHub pages to redirect to
index.html on all requests. Basically you have to add a
404.html in your build directory with code to redirect to
index.html. More on how to do that.
Create React App has documentation around client-side routing in GitHub pages too