如何配置我的 React 項目以從公共文件夾 html 文件中刪除.html 擴展？

Question

我目前正在開展一個項目，該項目涉及將反應應用程序附加到 static 網站。 我不能只將 html 轉換為 jsx，因為該網站使用自定義 css，如果不進行大量重構，React 就無法輕松呈現。

我一直在使用 react-app-rewired-multiple-entry 將 html 文件添加到項目中，該項目在開發中有效，但在構建中無效。 我考慮的另一種方法是將 html 文件放入公用文件夾，並將到公用文件夾的路徑定義為不需要。html 擴展來訪問 html 文件。 我不能使用 React-Router-DOM 或任何東西，因為這些文件位於 react-app 的 scope 之外。

The HTML files will render properly when placed in the public folder, but they have that pesky.html extension in the URL, and I was wondering if there's a way to rewire the create-react-app configuration, or even next.js configurations, to tell當擴展名未放入 URL 時，它是用於服務的內部路由器。html 文件。

Answer 1

解決了：

所以我的錯誤是假設開發服務器與提供構建包的服務器相同。 巨大的錯誤。 詳細地說，這意味着當我要進行 serve -s build 時，由 serve 設置的服務器沒有設置路由來顯示 static 文件，即使我通過修改開發服務器做得正確。

我最終要做的是創建一個自定義（但簡單）的 server.js 文件，該文件為唯一的構建包提供服務，分別為每個 static 文件提供服務。 它最終看起來像這樣（提供代碼以防其他人遇到此問題）：

const path = require("path");
const express = require("express");
const app = express(); // create express app

// serve the react-app by serving index.html
app.get("/react-app", (req, res) => {
  res.sendFile(path.resolve("./build/index.html"));
});

// serving the static files at different routes
const routes = ['home', 'about', 'help', 'etc'];

routes.forEach(route => {
  app.get(`/${route}`, (req, res) => {
    res.sendFile(path.resolve(`./build/${route}.html`));
  });
});

// start express server on port 5000
app.listen(5000, () => {
  console.log("server started on port 5000");
});