我之前在 GitHub 和 netlify 上创建并部署了单页 React 应用程序,它们都运行良好。问题在于使用react-router的多页面应用程序。为了测试这一点,我尝试了几次不同的应用程序,一旦我实现了反应路由器并链接到不同的页面,它们在部署后就会变成空白。这是一个测试应用程序:
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 上部署它时,我得到的只是一个包含这些错误的空白页面。截屏 https://i.stack.imgur.com/gZTzq.png
对于部署,我遵循本教程:反应-gh-页面 https://github.com/gitname/react-gh-pages
我真的很感谢你们的帮助。这个问题阻止了我取得任何进展。我花了三周时间制作我的作品集,但现在它就放在那里了。
update:
将 BrowserRouter 替换为 HashRouter 修复了最初的问题,并且控制台中不再出现任何错误。但是,我现在得到的是一个空白页面,就好像索引页面设置的路由不存在一样。
我认为我现在遇到的问题与此线程类似:将reactjs应用程序部署到github页面后出现空白页面 https://stackoverflow.com/questions/68701401/getting-a-blank-page-after-after-deploying-reactjs-app-to-github-pages