react router with dynamic routes give 404 on a browser direct link

Question

I have a React Front-end connected to Wordpress API and the routes are defined in clientside with React Router . When i use Link to direct them to dynamic routes they work fine. But when i use browser address bar directly to access the links pressing enter, or i refresh.i get

404 page not found

and i got to know that is because a direct call to server is happening and the there's no javascript to manipulate the react-router actions on the shared host when we have a PHP Server on that.

Thought about react-snapshot but its not going to suit the dynamic nature from the API.Please can anyone i give a possible way to go around this issue?

Answer 1

Check this out: https://github.com/rafrex/spa-github-pages

The concept might help you.

When the GitHub Pages server gets a request for a path defined with frontend routes, eg example.tld/foo, it returns a custom 404.html page. The custom 404.html page contains a script that takes the current url and converts the path and query string into just a query string, and then redirects the browser to the new url with only a query string and hash fragment.