React Router DOM: Subdirectory Routes Show Blank Page Instead of 404

Question

I have a React application deployed on a server, and I'm facing an issue with routing using React Router DOM. Specifically, when accessing example.com/asdfasdf/asdfasdf, I expect to see a 404 error page, but instead, I'm getting a blank white page with a syntax error in the browser console (Uncaught SyntaxError: Unexpected token '<').

example.com/asdf/, example.com/asdf/asdf and so on, show a blank page

example.com/asdf shows 404 page as expected

src/App.tsx:

import React, { useState } from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import HomePage from "./pages/home/HomePage";
import AboutPage from "./pages/about/AboutPage";
import NotFoundPage from "./pages/notfound/NotFoundPage";

import "./assets/styles/light/App.scss";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
        <Route path="*" element={<NotFoundPage />} />
      </Routes>
    </BrowserRouter>
  );
}

src/Index.tsx:

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { I18nextProvider } from "react-i18next";
import i18next from "i18next";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <I18nextProvider i18n={i18next}>
    <App />
  </I18nextProvider>
);

Answer 1

Adding <base href="/" /> to the public/index.html fixes the issue, and now all subdirectory routes properly show the 404 error page as expected.