[SOLVED] AWS Amplify: cannot access specific page via /page-name, only by starting at / and shallow routing

UPDATE

This is solved. I found the solution via this StackOverflow link, which details the following approach:

From the Amplify console, you can access the Rewrites and redirects menu item in left sidebar. From there you can update the redirect rule to these settings:

Source address: </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>
Target address: /index.html
Type: 200

Original Question

Source address: </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>
Target address: /index.html
Type: 200

My team and I just started hosting our UI on AWS Amplify. When accessing the page, we are able to access main.xxxxxxxxx.amplifyapp.com/ directly to get to the home page. We can then navigate to other pages from there, which causes the browser to shallow route to that page. For example, starting at / and clicking a link that calls...

const navigate = useNavigate();
navigate({ pathname: "/search" })

...works fine, since that's shallow routing; but attempting to go to main.xxxxxxxxx.amplifyapp.com/search using the browser's omnibar returns a 404.

We tried starting at / and clicking our way to other pages, which works fine, as this uses shallow routing. If we start at /page-name directly, Amplify returns a 404 Not Found on the page.