尝试部署我的第一个React应用程序。索引路由是可见的，但没有一个相对端点工作，我从呈现服务器得到一个404。然而，我读到我需要对部署进行以下更改，以便客户端路由正常工作：
Render's suggestion for configuring client-side routing to work properly
但是，当我访问"/login"或"/signup"之类的端点时，应用程序中的react路由器会将其捕获为404和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;

路由逻辑：

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;

我想这可能与文件路径有关，因为我的存储库包含API的子文件夹，然后是react应用程序的子文件夹，所以我可能认为我必须将html路径路由为/client/index. html或其他什么，但这不起作用。老实说，我不知道我应该做什么。我在部署方面的经验非常少，而且大多数资源和教程都涵盖了如何使用Heroku进行部署（最近已经弃用了它们的免费层）和大多数介绍在Render上部署React的教程都不涉及react路由器的任何用法。
另外，我想重申一下存储库的结构，因为它包含两个子文件夹，一个包含react应用程序“client”，另一个包含服务器代码“server”。
我想这可能与到index.html的重定向有关，但是Idk，我已经试着在渲染上弄乱配置，看看它是否会有区别，但是没有骰子。