User-friendly URL with Jquery

Question

Hello, everybody!

My system is developed in Jquery, so I make changes to pages without loading, only with $.get(). The big question is: even without loading, I need the URL to be changed, making the system even more user friendly. I can already make the change perfectly, making all internal transactions match perfectly with the URL changes. However, when updating the page in the current URL, or when I want to enter through one of these URL, it falls into a non-existent page, as everything is done only in index.html.

To illustrate the following: The whole process is done in index.html, which calls some . js that do all this control. However, when I click on the "profile" button and present this page without loading, I change the url to meusite.com/profile. The problem happens when I try to refresh this page. When updating, error 404 will appear as there is no index.html file in the "profile" folder. What I would like is for there to be a treatment and that when entering meusite.com/profile, it would be redirected to index.html? page=profile, for example.

What can I do?

From now on, thank you!

Answer 1

You can do this using the file .htaccess to target a specific 404 error page and redirect it to the index.html with the parameter in question.

1) Create a page .html in the root folder to which errors will be directed 404:

redir.html

2) Insert into the page redir.html the Javascript code that will capture the parameter and make the redirect:

<script>
var url_ = location.href;
params = url_.split("/").pop();
location.href = "index.html?pagina="+params;
</script>

3) Enter in the file .htaccess the code:

RewriteEngine On
ErrorDocument 404 /redir.html

This way, if the URL is accessed meusite.com/perfil, will be redirected to index.html?pagina=perfil.