How to config Nginx server multiple applications on one domain

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;
}
}