ReactJS：打开 /about 页面时获取 404

Question

这是我第一次将 React Web 应用程序部署到 Firebase 托管。 在我的index.html文件中，我只有根 div：

<body>
    <div id="root" class="container"></div>
</body>

这就是身体里的全部。 然后我在src文件夹中有一个index.js ，我有：

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

我有一个名为build的文件夹，它是 public 文件夹，在构建之后，它只有index.html和404.html以及一个static/js文件夹，其中包含一些生成的js和txt 。

所以，我不确定为什么我会收到 404。在开发版本中，即localhost导航工作正常。

Answer 1

那是因为它是单个index.html的静态部署， about.html不存在，只能访问 index.html，其他视图“不能”，因为是单页应用程序，但您可以将“/”以外的所有 URL 重定向到index.html文件，编辑 firebase.json

"rewrites": [ {
  "source": "**",
  "destination": "/index.html"
} ]

Answer 2

对于单页应用程序，必须指定重定向规则。 每个路由都应该从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"
  }
}

ReactJS：打开 /about 页面时获取 404

问题描述

2 个解决方案

解决方案1
0 2021-11-01 19:50:26

解决方案2
0 2021-11-01 20:15:17

ReactJS：打开 /about 页面时获取 404

问题描述

2 个解决方案

解决方案1 0 2021-11-01 19:50:26

解决方案2 0 2021-11-01 20:15:17

解决方案1
0 2021-11-01 19:50:26

解决方案2
0 2021-11-01 20:15:17