React Not Found The requested URL was not found on this server

so i uploaded my website to strato the other day. it is a react.js site and i get the error of Not Found The requested URL was not found on this server. this only happens when i go to a different page like /status. the root page works just fine only the route pages don't and give this error.

it is only server sided since on localhost it still does work. but how do i fix it?

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter as Router } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>
);

reportWebVitals();

// src/Routes.js
import React from "react";
import {
  BrowserRouter as Router,
  Route,
  Routes,
  loader,
} from "react-router-dom";
import Home from "./views/Home";
import Status from "./views/Status";
import Patchnotes from "./views/PatchNotes";
import Terms from "./views/Tos";
import Policy from "./views/Policy";
import Mentions from "./views/Mentions";
import Login from "./views/Login";
import NotFound from "./views/404";
import Maintanance from "./views/maintanance";

const AppRoutes = () => {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/status" element={<Status />} />
      <Route path="/patchnotes" element={<Patchnotes />} />
      <Route path="/terms" element={<Terms />} />
      <Route path="/privacy" element={<Policy />} />
      <Route path="/mentions" element={<Mentions />} />
      <Route path="/login" element={<Login />} />
      <Route path="/maintanance" element={<Maintanance />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
};

export default AppRoutes;


import "./App.css";
import Footer from "./components/Footer.js";
import Header from "./components/Header.js";
import AppRoutes from "./Routes.js";

function App() {
  return (
    <div className="App">
      <Header />
      <AppRoutes />
      <Footer />
    </div>
  );
}

export default App;

RewriteEngine On
RewriteBase /
RewriteRule ^ index.html [L]

Solution

The cool thing about React is that it contains everything in single page (SPA). When we then need multi page behavior, we simulate it. This is exactly what React Router does. It uses the History API and pushes a new state on the stack, while re-rendering its context component (more or less). And this works fine locally, because we use a bundler (I'm guessing Vite?) and the bundler knows not to hard refresh the page when the location changes.

The issue then becomes, does Strato also know not to hard refresh the page? It seems not. The only page Strato knows is root, as your application is a SPA and anything besides root is dynamically generated. So you need to figure out, how to tell Strato to only serve root even if the location changes. Strato seems to be in German, so I can't be of much help there :)