Javascript React和Firebase路由问题-空白屏幕

将React应用程序部署到Firebase时出现问题。

“/”

路由返回一个空白页，如下所示：

部署时，

“/play”

路由正在工作

该应用程序在本地运行，而旧的post非常类似。我认为问题与路由的设置有关

Index.json:

{
  "database": {
    "rules": "database.rules.json"
  },
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]}
    ]
  }
}

.
├── README.md
├── build
│   ├── 404.html
│   ├── asset-manifest.json
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   ├── precache-manifest.854d50eae40e11026f38a5efaaf2e505.js
│   ├── robots.txt
│   ├── service-worker.js
│   └── static
├── database.rules.json
├── firebase.json
├── package-lock.json
├── package.json
├── public
│   ├── 404.html
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── Actions
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── Config
│   ├── Images
│   ├── Landing.js
│   ├── Modal
│   ├── Navbar
│   ├── Reducers
│   ├── Rules
│   ├── Startpage
│   ├── Word
│   ├── WordForm
│   ├── Wordpool
│   ├── history.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── serviceWorker.js
│   └── setupTests.js
└── yarn.lock

从“React”导入React；
从“react dom”导入react dom；
导入“/index.css”；
将*作为serviceWorker从“/serviceWorker”导入；
导入“bootstrap/dist/css/bootstrap.min.css”；
导入“font awesome/css/font awesome.min.css”；
导入“./node_modules/font-awesome/css/font-awesome.min.css”；
从“/Landing”导入着陆；
从“/Startpage/Startpage”导入起始页；
从“redux”导入{createStore，applyMiddleware}；
从“/Reducers/Reducers”导入rootReducer；
从“react redux”导入{Provider}；
从“redux devtools扩展”导入{composeWithDevTools}；
从“redux承诺”导入承诺中间件；
从“redux”导入{compose}；
从“redux thunk”导入thunk；
const composeinhancer=window.uuu REDUX_vtools_uextension_u124;COMPOSE|COMPOSE；
函数配置存储（预加载状态）{
返回createStore(
减根剂，
composeEnhancer（applyMiddleware（thunk，promiseMiddleware））
);
}
const store=configureStore（）；
ReactDOM.render(
,
document.getElementById（“根”）
);
serviceWorker.unregister（）；

Landing.js

import React，{Component}来自“React”；
从“/App”导入应用程序；
从“/Rules/Rules”导入规则；
从“react Router dom”导入{Router，Switch，Route}；
从“/Startpage/Startpage”导入起始页；
从“/history.js”导入历史记录；
类扩展组件{
render（）{
返回(
);
}
}
导出默认着陆；

Startpage.js

import React，{Component}来自“React”；
从“react router dom”导入{NavLink}；
导入“/Startpage.css”；
从“firebase/app”导入firebase；
从“@material ui/core/TextField”导入TextField；
从“@material ui/core/styles”导入{makeStyles}”；
从“react redux”导入{connect}；
从“redux”导入{compose}；
从“./Actions/Actions”导入{setGameId，setGameId1，updateState}；
从“@物料界面/核心/按钮”导入按钮；
从“./CONFIG/CONFIG”导入{DB_CONFIG}；
从“./history.js”导入历史记录；
const useStyles=makeStyles（（主题）=>({
根目录：{
显示：“flex”，
柔性包装：“包装”，
},
文本字段：{
边缘左侧：主题。间距（1），
边缘光：主题。间距（1），
宽度：“25厘米”，
},
}));
类Startpage扩展组件{
建造师（道具）{
超级（道具）；
此.state={
gameObj:{key:null，gameId:null}，
测试：错误，
newWordContent:“”，
};
如果（！firebase.apps.length）{
firebase.initializeApp（DB_CONFIG）；
}
firebase.database.enableLogging（false）；
this.gameIds=firebase.database（）.ref（）.child（“gameIds”）；
}
GetLargestGameIDDB=（）=>{
var myPromise=新承诺（（解决、拒绝）=>{
这个是配子
.orderByChild（“游戏ID”）
.limitToLast（1）
.一次（“值”，函数（捕捉）{
snap.forEach（（子项）=>{
让filteredObj=child.val（）.gameId；
console.log（child.val（）.gameId）；
解析（filteredObj）；
});
});
});
回报我的承诺；
};
handleNewGame=async（）=>{
//当按下新游戏按钮时，功能启动！
让a=等待此消息。checkIfEmptyDb（）；
如果（a==false）{
this.sendNew（0，this.handleState）；//将新游戏id设置为0。
}
如果（a==真）{
log（“数据库存在！”）；
试一试{
this.updateAndSendNew（this.sendNew）；
}捕获（e）{
console.log（“确保填好单词”）；
}
}
};
checkIfEmptyDb=async（）=>{
var ref=firebase.database（）.ref（“游戏ID”）；
//承诺的回报价值
返回ref.one（“值”）。然后（（快照）=>{
const a=snapshot.exists（）；
返回a；
});
};
//回调函数
updateAndSendNew=异步（回调）=>{
this.getLargestGameIDDB（）。然后（（newId）=>{
让newGameId=newId+1；//将一个添加到数据库中的larges gameId中
回调（newGameId，this.handleState）；
});
};
sendNew=async（newId，回调）=>{
等待回调（newId）；//在路由到播放应用程序之前，首先完成此操作。
//这个.routingFunction（）；
};
handleState=异步（newId）=>{
试一试{
var newRef=this.gameIds.push（）；
var newKey=newRef.key；
console.log（newKey，newId）；
newRef.set（{gameId:newId}）。然后（（）=>{
log（“添加到redux状态！”）；
this.props.changeGlobalId2（newId，newKey）；//更新存储速度慢。
这是我的国家(
{
测试：对，
gameObj：{
配子编号：newId，
键：newKey，
},
},
() => {
log（“新状态：”，this.state）；
}
);
});
}捕获（e）{
console.log（“游戏更新未推送到firebase”）；
}
};
//我需要确保这一个在所有其他的之后被调用！
路由函数=（）=>{
这个.props.history.push（“/play”）；
};
handleUserInput=（e）=>{
this.setState（{newWordContent:e.target.value}）；
};
joinGame=（）=>{
console.log（this.state.newWordContent）；//https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch
this.getMatchingGameKey（this.state.newWordContent）
。然后（（res）=>{
console.log（“key”，res.key）；
log（“gameId”，res.val（）.gameId）；
this.setState（{newWordContent:“}）；
this.props.changeGlobalId2（res.val（）.gameId，res.key）；//更新re
The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.