Routing to static HTML using React and AWS-Amplify

Question

I have built a website using React and am now using AWS-Amplify to host it. I am trying to setup Routes that redirect to static HTML files which are located in the /public directory. Everything works just fine when I test locally, but the Routes don't work after the site has been deployed.

This is what I have for my Routes.

<BrowserRouter>
    <Routes>
        .
        . // Other unrelated Routes here..
        .
        <Route path="/page1" render={() => {window.location.href="page1/index.html"}} />
        <Route path="/page2" render={() => {window.location.href="page2/index.html"}} />
        <Route path="/page3" render={() => {window.location.href="page3/index.html"}} />
    </Routes>
</BrowserRouter>

My rewrites and redirects setting for 200 (Rewrites) is currently:

</^[^.]+$|\.(?.(html|css|gif|ico|jpg|jpeg|js|png|PNG|txt|svg|woff|ttf|map|json)$)([^.]+$)/>

The console doesn't give any warnings or errors whenever I try to access these static HTML files from the deployed site, but a null page is loaded. Is there some settings I need to modify on my Amplify application? Thanks!

Answer 1

Try removing your react-router entries and adding some rewrites/redirects in amplify console for something like:

/page1 /public/page1/index.html 200

/page2 /public/page2/index.html 200

This may give you some ideas for a solution using rewrites/redirects. I've used it myself but not sure on how maintainable it is going forward.

Answer 2

From the AWS Amplify console left sidebar under App Settings, click Rewrites and redirects.

click "Edit" on the right-hand side and in the same place click "Open text editor"

your configurations should be something like the below.

[
{
    "source": "/static-folder-in-public/<*>",
    "target": "/static-folder-in-public/<*>",
    "status": "200",
    "condition": null
},
{
    "source": "/static/<*>",
    "target": "/static/<*>",
    "status": "200",
    "condition": null
},
{
    "source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|json|xml)$)([^.]+$)/>",
    "target": "/",
    "status": "200",
    "condition": null
}
]