javascript - 将反应应用程序部署到服务器后出现空白页面和错误
问题描述
我使用 react js 创建了一个应用程序,然后我将它部署到服务器,但是当我访问它时,我发现一个没有错误消息的空白页面。我在 stackoverflow 中搜索了谷歌和其他相关问题,并尝试了他们的解决方案,但我仍然有空白页。然后我将BrowserRouter更改为HashRouter在这种情况下它可以工作,但在某些时候出现以下错误: 错误消息图像
(我想我可以通过对代码进行少量更改来修复它)
但我不想使用HashRouter ,是否有其他可能使用BrowserRouter使其工作(没有空白页)?
包.json:
{
"name": "flowdia_react_version",
"homepage": ".",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"serve": "^12.0.0",
"web-vitals": "^1.0.1"
},
"scripts": {
"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"
]
}
}
index.js:
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter as Router } from "react-router-dom";
ReactDOM.render(
<React.StrictMode>
<Router forceRefresh={true} >
<App />
</Router>
</React.StrictMode>,
document.getElementById("root")
);
应用程序.js:
import "./dist/css/style.css";
import { Switch, Route } from "react-router-dom";
import Questions from "./components/questions/Questions";
import StartPage from "./components/StartPage";
import Output from "./components/Output";
import HomeCare from "./components/HomeCare";
const App = () => {
return (
<Switch>
<Route path="/" exact children={<StartPage />} />
<Route path="/questions" children={<Questions />} />
<Route path="/output" children={<Output />} />
<Route path="/home-care" children={<HomeCare />} />
</Switch>
);
};
export default App;
解决方案
推荐阅读
- javascript - npm replace:用 npm 脚本替换多个文件中的文本的问题
- .net - 在 .NET Core 中添加自定义 BasicAuthenticationHandler - 将必要的服务注入处理程序的问题
- spring - 实体数据加载_in Spring Batch Boot
- c++ - 如何在参数化的 googletest 中传递 N 个变量进行测试?
- xaml - Xamarin Forms Right center 复选框
- c - C - 无法在 OSX 的当前目录上创建文件
- reactjs - 哪些 React Material-UI 组件为我的页面添加了间距(如 Bootstrap 中的行类)?
- php - 将 CodeIgniter 移至另一台服务器
- react-native - 不了解行为
- android - 如何在颤动中设置中心()传单地图