[英]React app showing blank page after deployment
我之前在 GitHub 和 netlify 上创建并部署了单页反应应用程序,它们都运行良好。 问题在于使用 react-router 的多页应用程序。 为了测试这一点,我用不同的应用程序尝试了几次,一旦我实现 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>
);
应用程序.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";
const Navbar = () => {
return (
<>
<nav className="navbar">
<ul>
<li>
<a href="/">home</a>
</li>
<li>
<a href="/about">about</a>
</li>
<li>
<a href="/products">products</a>
</li>
</ul>
</nav>
</>
);
};
export default Navbar;
Package.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 上部署它时,我得到的只是一个带有这些错误的空白页。 截屏
对于部署,我遵循本教程: react-gh-pages
我真的很感谢你们的帮助。 这个问题阻止了我取得任何进展。 我花了 3 周的时间制作我的作品集,现在它就坐在那里。
更新:用 HashRouter 替换 BrowserRouter 修复了最初的问题,控制台中不再有任何错误。 但是,我现在得到的是一个空白页面,好像索引页面设置的路由不存在。 我认为我现在遇到的问题类似于此线程: Getting a blank page after deploying reactjs app to github pages
改变:
"homepage": "https://EricSsSnake/github.io/test-app",
至:
"homepage": "https://EricSsSnake.github.io/test-app",
并使用HashRouter而不是BrowserRouter 。 在您的情况下,像这样更改您的index.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这就是为什么您可以切换到使用哈希路由(反应路由器中的HashRouter
)检查create-react-app的官方文档
控制台中是否有任何错误?
如果没有,请尝试使用从 'react-router-dom' 或 'react-router' 导入的<Link />
组件,而不是 html 提供的 '',因为<a>
会触发页面刷新而<Link />
不会.
希望这个答案对你有帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.