我在运行 npm run build 时遇到了 React Router DOM 的问题。当尝试将主页设置为构建文件夹中的index.html 时，就会出现问题。尽管尝试了各种解决方案，例如调整 package.json 配置和使用 BrowserRouter，问题仍然存在。
import React, { useEffect } from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import { HomePage } from "./Pages/Home/Home.js";
import ApplicationPage from "./Pages/ApplicationFresh/ApplicationPage.js";
import CutoffPage from "./Pages/CutoffCalc/Cutoff.js";
import ContactPage from "./Pages/ContactUs/ContactPage.js";
import FaqsPage from "./Pages/Faqs/FaqSection.js";
import PremiumBooks from "./Pages/Books/PremiumBooks.js";
import FreeBooks from "./Pages/Books/FreeBooks.js";
import Tawktochat from "./components/TawkChat/Tawkto.js";
import NotFound from "./Pages/Error/Notfound.js";
import WhatsAppChatBubble from "./components/Whatsapp/ChatComponent.js";
import { Box } from "@mui/material";
function App() {
// DISABLE RIGHT CLICK
useEffect(() => {
const disableRightClick = (event) => {
if (event.button === 2) {
event.preventDefault();
}
};
window.addEventListener("contextmenu", disableRightClick);
return () => {
window.removeEventListener("contextmenu", disableRightClick);
};
}, []);
return (
<Router basename={process.env.PUBLIC_URL}>
<Routes>
<Route exact path="/" element={<HomePage />} />
<Route
path="/NATA_Application_Form_2025"
element={<ApplicationPage />}
/>
<Route path="/nata-cutoff-calculator" element={<CutoffPage />} />
<Route
path="/NATA_Coaching_center_near_me_address"
element={<ContactPage />}
/>
<Route path="/faqs" element={<FaqsPage />} />
<Route path="/Premium_Books" element={<PremiumBooks />} />
<Route path="/NATA_Free_Books" element={<FreeBooks />} />
{/* 404 */}
<Route path="*" element={<NotFound />} />
</Routes>
<Box sx={{ display: "flex", justifyContent: "space-between" }}>
<WhatsAppChatBubble />
<Tawktochat />
</Box>
</Router>
);
}
export default App;
index.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { ThemeProvider, createTheme } from "@mui/material";
const theme = createTheme();
ReactDOM.render(
<React.StrictMode>
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>
</React.StrictMode>,
document.getElementById("root")
);
reportWebVitals();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />
<link
href="https://fonts.googleapis.com/css2?family=Handlee&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet"
/>
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>neramClasses - Online NATA coaching classroom</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
可在此处访问实时网站 neramClasses.com。 Youtube API 工作正常，但现在也无法工作。
我最初使用BrowserRouter，出现问题，所以改用HashRouter进行部署。不过，我更喜欢使用 BrowserRouter 来获得更清晰的 URL 并解决图像位置问题。
我想使用浏览器路由器来构建，哈希路由正在影响我的搜索引擎优化，在链接中添加#。使用 browserRouter，我想将我的主页设为 index.html 并将其部署到 firebase。目前，当我构建时，BrowserRouting正在创建一个空页面，或者当我使用 npm run build 时将 404 作为index.html
任何关于如何正确配置 React Router DOM 以在构建过程中正确路由到 index.html 作为主页的见解或解决方案将不胜感激。谢谢！
您部署方式错误。
使用
create-react-appnpm run build # for building your client app
npm run start # for previewing your built app.
不要修改你的构建目录，当你运行
命令时它会被修改。npm run build