reactjs - Create-React-App/React Router 无法通过渲染进行部署

Question

尝试部署我的第一个 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 路由器的任何使用。

此外，我想重申一下存储库的结构，因为它包含两个子文件夹，一个包含名为“client”的 react 应用程序，另一个包含名为“server”的服务器代码。这是一个image

我想这可能与到index.html的重定向有关，但我不知道，我已经尝试过修改渲染上的配置，看看它是否会产生影响，但没有骰子。

Answer 1

请阅读:https://render.com/docs/deploy-create-react-app

并将其添加到重定向/重写部分