Question 107998 in Amazon Web Sevices Question posted in
The official Amazon Web Services documentation can be found here.

Amazon web services – AWS Amplify and React using the react-router-dom gives AccessDenied

I use AWS Amplify to deploy a React app. When I deploy the react web application, the root URL works as expected (example.com). However, if you try to access a sub-url (say example.com/something) then it gives an error AccessDenied.

My react-router code is like so:

import { BrowserRouter, Routes, Route } from "react-router-dom";

const Router = () => {
    return ( 
        <React.Fragment>
            <BrowserRouter>
                <Routes>
                    <Route path="/" element={
                        <React.Fragment>
                            <Footer/>
                        </React.Fragment>
                    } />

                    <Route path="something" element={
                        <React.Fragment>
                            <Something/>
                            <Footer/>
                        </React.Fragment>
                    } />
                </Routes>
            </BrowserRouter>
        </React.Fragment>
    )
}

Looking around, it seems that you need to set up a redirect rule like so:

[
    {
        "source": "</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>",
        "target": "/index.html",
        "status": "200",
        "condition": null
    }
]

When I do, indeed it stops giving me the AccessDenied error, however now my react-rotuer-dom code is not working as expected and I just get an empty index.html page.

I have been having this for a long time and it’s so annoying. I don’t know if this is a React issue or AWS issue. Can you please point me to the right direction?

Update

There seems to be an issue with AWS Amplify Exports? When I try to navigate to home page of the web app, I get a blank page, then looking to the console I see an error:
"TypeError: undefined is not an object (evaluating 'l[e].call')" which is this line:

return l[e].call(r.exports, r, r.exports, f), r.l = !0, r.exports
Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    I managed to fix the error. It seems that the React packages were out-dated and cause this error during build. I just upgrade all the packages in my project and that solved the problem.


  2. 0

    It seems that you need to change <Route path="something" to <Route path="/something". This is probably the reason you are redirected back to index.html instead of the actual route you want to go to.

    Login or Signup to reply.
  3. 0

    First, I suggest to use Switch in your routes to catch page not found error 404

    import { BrowserRouter,Switch, Routes, Route } from "react-router-dom";

const Router = () => {
    return ( 
        <React.Fragment>
            <BrowserRouter>
              <Switch>
                <Routes>
                    <Route path="/" element={<Footer/>} />

                    <Route path="something" element={
                        <>
                            <Something/>
                            <Footer/>
                        </>
                    } />
                </Routes>
              </Switch>
            </BrowserRouter>
        </React.Fragment>
    )
}

    second update source property to

    [
{
    "source": "**",
    "target": "/index.html",
    "status": "200",
    "condition": null
}
]
    Login or Signup to reply.
  4. 0

    im always using this in netlify i dont know if its work on amplify.

    change this in package json

    if using vite
    "build": "vite build && echo '/* /index.html 200' | cat >dist/_redirects"

    if using CRA
    "build": "react-scripts build && echo '/* /index.html 200' | cat >build/_redirects"

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search