Correct work of AJAX site with existing links to static pages, how?

Question

JavaScript

Good afternoon,
there is a site on ajax links (I will immediately make a reservation to make up a site on AJAX links - not my idea, but one of the main requirements of the customer).
JS is written in such a way that when you enter mysite.ru/#/About/ into the address bar, the script picks up everything that comes after # and displays the desired page. Implemented as follows:
1) The user entered the request mysite.ru/#/About/
2) Regardless of the address, the server returns the main page with a header and footer, but without the page content itself.
3) JS script from the main page checks the current address in the address bar. If there is a #, it sends a POST request to the server with the page ID following the # (ID=About). The server makes a request to the database for the content of the page with ID=About and returns it as a response to the POST request. The content is inserted by the script between the header and footer.
This has already been implemented and is working fine.
As I understand it, if, for example, a blogger wants to share a link to our site, then everything will open normally.

The question is:
The old version of the site had about 20 pages indexed by Google and Yandex. Indexed page addresses do not contain # (of course). That is, the current links in Google look like this: mysite.com/About/

The current state of htaccess:

RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

That is, index.php is always given with the 404 code, which of course also most likely needs to be redone.

How to remake htaccess and script so as not to lose positions. We need the simplest and fastest option (later I will add a !# mechanism for indexing ajax loaded pages, but now the client needs it urgently). I remind you that there are about 20 indexed pages in total (that is, count on the fingers). I am a beginner front-end developer, the specifics are not mine at all, please help.

Thanks in advance!

Answer 1

As Google tells me, in the simplest case, you need to redirect all requests to non-existent resources to the main page.

Options +FollowSymLinks
IndexIgnore */*
RewriteEngine on

# if a directory or a file exists, use it directly
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteCond %{REQUEST_URI} !/api

# otherwise forward it to index.html 
RewriteRule ^.*$ - [NC,L]
RewriteRule ^app/. /app/index.html [NC,L]

Here your main page is located in the app/index.html folder
On the page, use js to take the window.location.pathname path, rip out what you need from it and act as if you received the value after the "#".