React Router 404 Page catch-all only works on index in deployed web build?

I've been struggling for the past day to get the react router working correctly for my React Native Web application. Namely, despite following quite a few guides on setting up a catch-all 404 page, the solutions only work from expo start on a local host test. In there, I can type any arbitrary address and activate the 404 page. However, with a deployed web build, the 404 page won't work unless I type /index after the address (www.example.com/index for example). If I type anything else that in theory should bring me to the 404 (such as www.example.com/alkjshdakh or even www.example.com/404), I get the following error in my browser:

This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>9C6M8QSYEVZGCEXQ</RequestId>
<HostId>av+kOjxxgyXcIRSdeA7qRzVGuoigeCeiEQyDE/iJoQMYvmTjar4PV2d+3/IPoJO2T+9/NFkbDUs=</HostId>
</Error>

I'd like to reiterate that this only happens in deployed builds, and the 404 catches everything locally. Is there something I'm doing wrong? Or perhaps something I'm missing? My code for the project's App.js is posted below for reference:

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
console.log("Importing....")

//WebPages
console.log("Importing pages");
import MainPage from "./assets/pages/index";
import NotFoundPage from './assets/pages/404';

//export default function App()
class App extends Component {
  render() {
        console.log("Loading... Pages");
    return (
    <Router>
      <Switch>
        <Route exact path = "/" component = {MainPage} />
        <Route exact path = "/404" component = {NotFoundPage} />
        <Redirect to = "/404" />
      </Switch>
    </Router>
    );
  }
}

export default App;

1 answer

  • answered 2021-10-24 20:42 MW97

    The problem likely isn't in your code, and if you're like me, it's an issue with AWS Amplify (assuming you're using it). To fix it, go to your AWS Amplify Console > Rewrites and Redirects. From there, create a new entry with the following parameters:

    Source Address: </^((?!\.(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$).)*$/>
    Target: /index.html
    Type: 200 (Rewrite)
    

    Source: @Vinit Khandelwal https://stackoverflow.com/a/63554987/17235602

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum