部署到文件夹后反应空白页
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了部署到文件夹后反应空白页相关的知识,希望对你有一定的参考价值。
我有一个反应应用程序: http:// we ****。com / buzz /
上面的url显示它已部署在buzz
文件夹下。
它只displays blank page
,浏览器中no console error
。
我已经在package.json中设置了homepage
变量,所有的网址似乎都没问题。
有人可以让我知道这个问题。
我的package.json文件是:
{
"name": "buzz",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.1",
"react-scripts": "3.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"homepage": "http://we****.com/buzz/",
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
我的路线档案::
import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from "react-router-dom";
import HomeComponent from '../Components/Home';
import LoginComponent from '../Components/Login';
import SignupComponent from '../Components/Signup';
import MyStoriesComponent from '../Components/Story/MyStories';
import AddStoryComponent from '../Components/Story/AddStory';
export default class Routes extends Component {
render() {
return (
<BrowserRouter>
<Switch>
<Route exact path="/" component={HomeComponent} />
<Route exact path="/login" component={LoginComponent} />
<Route exact path="/signup" component={SignupComponent} />
<Route exact path="/mystories" component={MyStoriesComponent} />
<Route exact path="/addstory" component={AddStoryComponent} />
{/*<Route exact path="/listPartnerAccount/:id" component={ListPartnerAccount} />*/}
</Switch>
</BrowserRouter>
);
}
}
答案
我通过做两件事解决了这个问题:
1)在package.json文件中设置以下代码
"homepage": "http://we****.com/buzz/"
2)在路由文件中设置BrowserRouter中的basename:
export default class Routes extends Component {
render() {
return (
<BrowserRouter basename={'/buzz'}>
<Switch>
<Route exact path="/" component={HomeComponent} />
<Route exact path="/login" component={LoginComponent} />
<Route exact path="/signup" component={SignupComponent} />
<Route exact path="/mystories" component={MyStoriesComponent} />
<Route exact path="/addstory" component={AddStoryComponent} />
{/*<Route exact path="/listPartnerAccount/:id" component={ListPartnerAccount} />*/}
</Switch>
</BrowserRouter>
);
}
}
请注意,只有在package.json文件中设置主页对我不起作用,这是上述2个步骤的组合对我有用。
另一答案
如果您将构建文件上传到该目录(http://*****.com/buzz/),这应该可以正常工作。
请先在package.json上添加主页后确认您构建应用程序。 该命令是(纱线运行构建或纱线构建),之后将文件从构建目录上传到您想要的位置。
以上是关于部署到文件夹后反应空白页的主要内容,如果未能解决你的问题,请参考以下文章
为啥在部署我的项目后卡住/空白页面?反应路由器 Dom |参数
Service Worker 在 React 应用程序中刷新后导致空白页