How to host multiple pages/routes in Amplify App

Question

Hi!
I wanted a bit of help understanding how amplify is expecting to manage multiple routes of the same domain, like "www.main.com" as domain, multiples routes being like "www.main.com/accesses/" or  "www.main.com/upload/". 
My application works locally but not on amplify app hosting. We did it like a typical react application.  
Does anyone now what should be the code structure to store these different pages and how I should configure the different routes on Amplify?

Thank you,
Margarida

Answer

To handle multiple routes with Amplify, you need to configure routing rules in the Amplify console or through the Amplify CLI.

Some key points:

Routing rules allow mapping incoming request paths to specific targets like static assets or Lambda functions.

You need a catch-all route that matches all requests.

Additional routes can be added for specific paths like 
/access
 or 
/upload
.

Static routes point to the 
.amplify/hosting/static
 directory. Compute routes point to Lambda functions.

Base path routing is also supported. The base path would need to be prepended to static assets, routes, and the build output.

To configure routing through the CLI, you can run a command like:

```
amplify add api
```

This will generate a 
routing.yml
 file where you can define your routes. Make sure to push these changes to your repository for the new routes to be deployed.

How to host multiple pages/routes in Amplify App

Relevant content