Nginx locations - reactjs

Question

I'm working on a multi-tenant application in React and some clients want to upload .html files to the root of the project to use google console and things like that. I would not like all those files to be mixed with the application code so apart from the following code:
location / {
try_files $ uri /index.html = 404;
}
I would like to add in NGINX a location block that allows me to divert to another folder any other .html file that starts in /, excluding cases like /static/example.html.
Example:
/ -> React default
/static/*.html -> React default
/*.html -> Derive to new folder
I would appreciate any help in this regard.
I tried something like this...
location /*.html {
root /extras_folder;
}
location / {
root /project_folder;
try_files $uri /index.html =404;
}
But does not work

Answer 1

This adheres to the rules you described:
location ^~ /index.html {
root /project_folder;
try_files $uri /index.html =404;
}
location ~ ^/[^/]+\.html {
root /extras_folder;
try_files $uri /index.html =404;
}
location / {
root /project_folder;
try_files $uri /index.html =404;
}
Second block is a regex match only on *.html in the root path
Third block is for all other paths
First block is to cover the edge case of / being /index.html - regex rules otherwise always get priority over path location blocks

Answer 2

What about this?
server {
listen 80;
root /project_folder;
location / {
try_files $uri #extras_folder;
}
location #extras_folder {
root /extras_folder;
try_files $uri #index_html;
}
location #index_html {
try_files /index.html =404;
}
}
This looks in /project_folder first, in /extras_folder second and, if still no file is found finally serves /project_folder/index.html (or 404 if that file doesn't exist).
You'd put uploaded files into /extras_folder in this case.