I change (rewrite) URL with jquery but when user or I refresh the page, we get 404 not found error

Question

I rewrite URL like this,

history.pushState('data', '', 'http://radyospor.fstats.net/Galatasaray-Bursa');

Everything is good but after rewrite url when refresh page I get to:

"HTTP Error 404.0 - Not Found The resource you are looking for has been removed, had its name changed, or is temporarily unavailable."

How can I solve it?

Answer 1

Let's say your home page is at this URL: http://radyospor.fstats.net/
When you browse to that URL, the server returns the index.html file which is found in its web root.

When you call history.pushState , there is no call to the server but the URL is changed.

When you refresh after history.pushState , the URL is now http://radyospor.fstats.net/Galatasaray-Bursa which the server interprets as a request to a file named Galatasaray-Bursa in the web root directory.
This file does not exist, so you get a 404.

The solution

1. You need to serve index.html for requests to files that don't exist.
   Depending on where your app is hosted, this might be a configuration of the web server (EG nginx) or a configuration of the hosting service.
2. The Javascript code in index.html will need to read the current URL and display the relevant content accordingly.
   Assuming you don't use a framework like ReactJs, you can use something like page.js to handle the routing