Create-React-App/React Router Not Working On Deployment via Render [duplicate]

Question

Trying to deploy my first React application. The index route is visible but none of the relative endpoints work and I get a 404 from the render server. However I read that I needed to make these changes to the deployment in order for the client-side routing to work properly:

Render's suggestion for configuring client-side routing to work properly

However, when I visit an endpoint like "/login" or "/signup", the react router in my app catches it as a 404 and renders the 404 page, and the endpoint in the url changes to /index.html

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import Views from "./App";
import { BrowserRouter } from "react-router-dom";
import { UserProvider } from "./context/userContext.js";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <UserProvider>
      <BrowserRouter>
        <Views />
      </BrowserRouter>
    </UserProvider>
  </React.StrictMode>
);

App.js

import { Routes, Route } from "react-router-dom";
import PublicRoutes from "./routes/PublicRoutes";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import { useUser } from "./context/userContext.js";

function Views() {
  const { loading } = useUser();

  if (loading) return <h1>Loading...</h1>;

  return (
    <div className="App">
      <Routes>
        <Route path="*" element={<PublicRoutes />} />
      </Routes>
      <ToastContainer />
    </div>
  );
}

export default Views;

Routing Logic:

const PublicRoutes = () => {
  return (
    <QueryClientProvider client={new QueryClient()}>
      <Routes>
        <Route index element={<Landing />} />
        <Route path="login" element={<Login />} />
        <Route path="signup" element={<SignUpMUI />} />
        <Route element={<Protect />}>
          <Route path="dashboard" element={<Dashboard/>} />
          <Route path="event/:id" element={<EventPage />} />
          <Route path="profile" element={<>Profile Page</>} />
          <Route path="settings" element={<>Settings</>} />
        </Route>    
        <Route path="*" element={<h1>404</h1>} />
      </Routes>
    </QueryClientProvider>
  );
};

export default PublicRoutes;

I thought maybe it has something to do with the file pathing because my repository contains a sub-folder for the API and then a sub-folder for the react application so maybe I thought I had to route the html pathing as /client/index.html or something but that didn't work. Honestly I have no idea what I am supposed to do, I have very little experience with deploying and with most resources and tutorials covering how to deploy with Heroku (which has recently deprecated their free tier) and most tutorials covering React deployment on Render don't involve any usage of the react router.

Also, I would like to reiterate the structure of the repository as it contains two sub folders, one which contains the react application called "client" and another which contains the server code called "server". Here is an image

I'm thinking maybe this has something to do with the redirections to the index.html but Idk, I've already tried messing about with the configuration on render to see if it would make a difference but no dice.

Answer 1

Just read: https://render.com/docs/deploy-create-react-app

and add this to Redirects/Rewrites section