AWS Amplify and React using the react-router-dom gives AccessDenied

Question

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

score 0 · Answer 1 · answered Jul 21 '22 at 07:40

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.

answered Jul 21 '22 at 07:40

bentz123

1,081
7
16

Thank you for your time. Unfortunetly, I don't think this solved the problem. – Phrixus Jul 21 '22 at 19:53
can you share the code or a link to your project? – bentz123 Jul 22 '22 at 07:34

score 0 · Answer 2 · answered Jul 25 '22 at 13:20

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
}
]

score 0 · Answer 3 · answered Jul 26 '22 at 11:00

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"

score 0 · Accepted Answer · answered Jul 26 '22 at 18:19

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.

answered Jul 26 '22 at 18:19

Phrixus

1,209
2
19
36

AWS Amplify and React using the react-router-dom gives AccessDenied

Update

4 Answers4