I am deploying a simple app with create-react-app to a subdirectory.

I have set the homepage from package.json as below:

"homepage": "/subdir/",

and here’s the simplified code I’m using:

function App() {

  return (
  
    <BrowserRouter basename={"/subdir"}>
      <Routes>
        <Route path={"/"} element={<Landing />} />
        <Route path={"/test"} element={<h1>TEST</h1>} />
      </Routes>
    </BrowserRouter>

  );
}

export default App;

This works with no problem in localhost dev mode. (npm start)

However, when built and deployed, the nested page, url.com/subdir/test returns 404. (url.com/subdir works fine.)

also when the app is built (npm run build) and tested in local web server, same problem occurs.

I am deploying it to AWS Amplify and all rewrites and redirects are turned off.

I have tried using HashRouter, also tried nesting the routes.

I have also tried not using basename.

Still nothing seems to work.

Would anyone know how to fix this? thank you.