React应用程序在部署后显示空白页面

Question

我之前在GitHub和netlify上创建并部署过单页react应用程序，它们都运行良好。问题在于使用react路由器的多页应用程序。为了测试这一点，我用不同的应用程序尝试了几次，一旦我实现了react路由器并链接到不同的页面，它们在部署后就会变成空白。这里有一个测试应用程序：

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);

App.js

import React from "react";
import { Routes, Route } from "react-router-dom";
import Index from "./pages/Index";
import About from "./pages/About";
import Products from "./pages/Products";
import Navbar from "./components/Navbar";
const App = () => {
return (
<>
<Navbar />
<Routes>
<Route exact path="/" element={<Index />} />
<Route path="/about" element={<About />} />
<Route path="/products" element={<Products />} />
</Routes>
</>
);
}; 
export default App;

Navbar.js组件

import React from "react";
import {Link} from "react-router-dom";
const Navbar = () => {
return (
<>
<nav className="navbar">
<ul>
<li>
<Link to="/">home</a>
</li>
<li>
<Link to="/about">about</a>
</li>
<li>
<Link to="/products">products</a>
</li>
</ul>
</nav>
</>
);
};
export default Navbar;

包.json

{
"name": "test-app",
"version": "0.1.0",
"homepage": "https://EricSsSnake/github.io/test-app",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.4.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
] 
},
"devDependencies": {
"gh-pages": "^4.0.0"
}
}

加上3页可导航到。

当我在GitHub上部署它时，我得到的只是一个包含这些错误的空白页面。屏幕截图

对于部署，我遵循本教程：反应gh页

我真的很感谢你们的帮助。这个问题使我无法取得任何进展。我花了3周时间制作我的投资组合，现在它就在那里。

更新：用HashRouter替换BrowserRouter解决了最初的问题，控制台中不再有任何错误。然而，我现在得到的是一个空白页面，就好像索引页面设置为的路由不存在一样。我认为我现在遇到的问题与此线程类似：将reactjs应用程序部署到github页面后获得空白页面

Answer 1

更改：

"homepage": "https://EricSsSnake/github.io/test-app",

到：

"homepage": "https://EricSsSnake.github.io/test-app",

并使用HashRouter而不是BrowserRouter在您的情况下，更改索引.js，如下所示：

import React from "react";
import ReactDOM from "react-dom/client";
import { HashRouter } from "react-router-dom";
import "./index.css";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<HashRouter>
<App />
</HashRouter>
</React.StrictMode>
);

注意：githup页面不支持带有browserHistory的React Router，因为它使用了HTML5历史API这就是为什么您可以在create-React-app 的官方文档中切换到带有哈希的路由(React Router中的HashRouter(检查

Answer 2

控制台中有错误吗？

如果没有，请尝试使用从"react router dom"或"react router"导入的<Link />组件，而不是html提供的"，因为<a>将触发页面刷新，而<Link />不会。

希望这个答案能帮助你