react-router component rendering not working in AWS s3 bucket

Question

I have currently been researching an issue with react component rendering in an AWS s3 bucket using react-router. I have created a navigation header in my react application and route to different "pages" depending on which button is clicked. Here is an example:

In my header component, I have the following button and function routing to the appropriate location

<button id="navButton" onClick={this.linkManagerDashboard}>Dashboard</button>

linkManagerDashboard = (event) => {
    window.location = 'https://ledgerly.s3.amazonaws.com/ManagerDashboard'
}

I also switched the window.location to /index.html/ManagerDashboard to no avail. This of course works fine in my local testing environment. I then proceed to render the manager dashboard component through my main app component (which also works correctly in my local testing environment):

<Route path="/ManagerDashboard" render={() => (<ManagerDashboard></ManagerDashboard>)} />

All works fine until I uploaded my code to an AWS s3 bucket. (I did run the build command to create the build file). I added the files to the s3 bucket, enabled static web hosting, and included index.html as my default page AND error document under the static website hosting options in the s3 settings. However, when I click any of my buttons, I get the following error:

This XML file does not appear to have any style information associated with it. The document tree is show below.
<Error>
    <Code>AccessDenied</Code>
    <Message>Access Denied</Message>
    <RequestId>267DAD08ABA2000B</RequestId>
    <HostId>A+VvgfKAMKb2AvtAARx2PtGiSjx7FG57c7DrzrwtRmQZF81YQfdwGrETZ43ihXoWKXAhf41iI0c=</HostId>
</Error>

The initial page renders correctly. This error happens when I try to click one of my navigation buttons. I found some information about creating a policy to allow public traffic. Here is that policy:

{
"Version": "2012-10-17",
"Statement": [
    {
        "Sid": "AddPerm",
        "Effect": "Allow",
        "Principal": "*",
        "Action": "s3:GetObject",
        "Resource": "arn:aws:s3:::ledgerly/*"
    }
]

}

This is confusing to me because the resource line that includes "ledgerly/" indicates to me that any url subnames that follow the home url (/index.html) would be acceptable...I can't figure out why the navigation will not work. Why does the / in my policy not allow rendering of all the project resources and locations? Please help!!

dhruv479 · Accepted Answer · 2021-02-22 05:28:42Z

2

AWS S3 doesn't serve redirection rules for SPA out of the box. You will need to add redirection rules under the Static Website Hosting Section.

<RoutingRules>
    <RoutingRule>
        <Condition>
      <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
        </Condition>
        <Redirect>
            <ReplaceKeyWith>index.html</ReplaceKeyWith>
        </Redirect>
    </RoutingRule>
</RoutingRules>

Now, all the 404 will be redirected to index.html as needed by SPAs.

answered Feb 22, 2021 at 5:28

dhruv479

3212 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Luke Sharon Over a year ago

Please note that my error is "Access denies" or in others words a 401 error (not a 404 error). Will a redirection rule work for 401 errors as well?

dhruv479 Over a year ago

Under the Permissions tab, uncheck the Block all public access, this might be causing trouble in your case.

Collectives™ on Stack Overflow

react-router component rendering not working in AWS s3 bucket

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related