How to config Nginx server multiple applications on one domain - nginx-reverse-proxy

Question

I have 3 applications on one server
A: a bootstrap landing page, in /var/www/aaa
B: a react project, in /var/www/bbb
C: a h5 project, in /var/www/ccc
I want:
https://example.com goto A
https://example.com/home goto B (not https://example.com/home/xxx)
https://example.com/square goto C
I knew there are 3 way to do this:
One: by subdomain, but A,B,C are belong to a same big project, worry cross domain problem.
Two: by location, I did some search and tried, found it require url like https://example.com/home/index.xxx, but my project url will be https://example.com/home?event=xxx
Three: proxy_pass, I tried 3 days but failed, appreciate for any help.
main.conf
server {
listen 443 ssl http2;
server_name example.com localhost;
ssl_certificate /etc/ssl/certs/example.crt;
ssl_certificate_key /etc/ssl/example.key;
location /square/ {
proxy_pass http://localhost:83/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
location /home/ {
proxy_pass http://localhost:82/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
location / {
proxy_pass http://localhost:81/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
a.conf
server {
listen 81;
location / {
alias /var/www/aaa/;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}
b.conf
server {
listen 82;
location / {
alias /var/www/bbb/;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}
c.conf
server {
listen 83;
location / {
alias /var/www/ccc/;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}