I created a React app that I want to deploy to AWS Amplify. I use automatic deployment through GitHub. The problem is that I get access denied error when I visit a specific URL path, other than the root path of the web app. For example, visiting example.com/some-url
will cause an "AccessDenied" error.
It seems that this is a common issue with Amplify and SPAs, and people set up redirects to index.html
like so:
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json|webp)$)([^.]+$)/>
However, this is not a solution for me, or at least is not working I want to, since I want users to access specific page paths directly.
My react-router-dom
code which handles the redirects looks something like this:
return (
<React.Fragment>
<BrowserRouter>
<Routes>
<Route path="/" element={
<React.Fragment>
<Index />
</React.Fragment>
} />
<Route path="some-url" element={
<React.Fragment>
<SomethingElse/>
</React.Fragment>
} />
</Routes>
</React.Fragment>
</BrowserRouter>
</Routes>
Setting up a redirect to index.html
as the documentation suggests causes all requests to just land to index.html
which my React app only renders a blank page.
Any help will highly be appreciated.