這是我第一次將 React Web 應用程式部署到 Firebase 托管。在我的index.html檔案中，我只有根 div：
<body>
<div id="root" class="container"></div>
</body>
這就是身體里的全部。然后我index.js在src檔案夾中有一個：
import { BrowserRouter as Router, Route } from "react-router-dom";'
import HomeScreen from "./screens/HomeScreen";
import AboutScreen from "./screens/AboutScreen";
...
ReactDOM.render(
<Router>
<div>
<Route exact path="/" component={HomeScreen} />
<Route exact path="/about" component={AboutScreen} />
</div>
</Router>,
document.getElementById("root"))
然后打開關于頁面，我將其鏈接為：
import { Container, Nav, Navbar } from 'react-bootstrap';
...
<Nav.Link href="/about">About</Nav.Link>
當我這樣做npm run build然后firebase deploy它部署時，我可以在主頁上看到更改。但是當我點擊about它給我404
我有一個名為buildpublic 檔案夾的檔案夾，在構建之后，它只有index.htmland404.html和一個static/js檔案夾，其中包含一些生成的js和txt.
所以，我不確定為什么我會收到 404。在開發版本中，即localhost導航作業正常。
uj5u.com熱心網友回復：
那是因為它是一個單一的靜態部署index.html，about.html不存在，你只能訪問index.html，而其他視圖“不會”，因為是一個單頁應用程式，但你可以重定向所有的URL除了index.html檔案的“/”之外，編輯 firebase.json
"rewrites": [ {
"source": "**",
"destination": "/index.html"
} ]
uj5u.com熱心網友回復：
對于單頁應用程式，必須指定重定向規則。每個路由都應該從index.html檔案重定向
您需要指定正在部署的部署目錄和重定向規則
這是我的反應應用程式與 firebase 功能一起部署到 firebase 托管
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/343816.html
標籤：javascript html 反应 Firebase 托管