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.
