为啥在部署我的项目后卡住/空白页面？反应路由器 Dom |参数

Posted 2023-02-22

【中文标题】为啥在部署我的项目后卡住/空白页面？反应路由器 Dom |参数

【英文标题】：Why after deploying my project got stuck/blank page? React Router Dom | Params为什么在部署我的项目后卡住/空白页面？反应路由器 Dom |参数

【发布时间】：2020-09-26 04:10:36

【问题描述】：

我仍在升级我对 react-router-dom 和 Reactjs 的知识，我已经构建了一些项目，最终将 react-router-dom 用于我的路由器，并且当我以某种方式使其处于开发模式时（本地主机： 3000/detailevent/4）它在将参数发送到另一个函数的情况下效果很好，但是，当我将它部署到 firebase 时，它​​卡住了，每次我去 www.somewebpage.com/detailevent/4 它只是得到一个空白页面，刚刚发生了什么？在“生产”的情况下我需要改变一些东西吗？

哦，这是我的代码，以防你们需要查看：

//in App.js
    <Router>
    <Switch>
                  <Route exact path="/">
                    <Home />
                  </Route>
                  <Route exact path="/katalog">
                    <Listkatalog />
                  </Route>
                  <Route exact path="/video">
                    <Video />
                  </Route>
                  <Route exact path="/sejarah">
                    <Sejarah />
                  </Route>
                  <Route exact path="/detailevent/:id" component=Detailevent />
                </Switch>
    </Router>

这是 Detailevent.js 中的代码

//in Detailevent.js
componentDidMount() 
    console.log("ID: " + this.props.match.params.id);
    const ref = firebase
      .firestore()
      .collection("jadwal")
      .doc(this.props.match.params.id);
    ref.get().then((doc) => 
      if (doc.exists) 
        const item = doc.data();
        this.setState(
          key: doc.id,
          judul: item.judul,
          keterangan: item.keterangan,
          deskripsi: item.deskripsi,
          nowa: item.nowa,
          selectedDate: item.selectedDate,
          url: item.url,
        );
       else 
        console.log("No such document!");
      
    );
  

如果我在我的本地主机 (localhost:3000/detailevent/4) 中运行它，它可以工作，一切都很好，但是在我将它部署到我的 firebase 后，当我访问 www.somewebpage.com/ 时，Detailevent.js 总是卡住detailevent/4（使用 firebase 生成的 url）（不在我的 localhost 中，我在 localhost 中的项目仍然很好并且可以访问），你们知道发生了什么吗？

编辑： 我得到了 404 错误页面（空白页）

【参考方案1】：

无论如何，现在运行良好，一切正常。

不知道问题出在哪里，我刚刚安装了express，添加了NoMatch（针对404页面）组件，并删除了node_modules （用 npm install 重新安装），然后再次部署，老实说我不知道​​问题出在哪里。

【参考方案2】：

我没有使用过 firebase，但我在使用 AWS 时遇到过类似的错误。

在我的情况下是 404 错误，因为没有 /detailevent/:id 文件夹来查找 index.html 文件。

尝试为您的根index.html 文件提供this question 等一般错误情况

虽然我不太确定，因为您看到的是空白页面，而不是 404 错误页面。

【讨论】：

Yaaa，我收到 404 错误页面，接下来我需要做什么？我已经看过这篇文章create-react-app.dev/docs/deployment/…，但是我看不懂，我已经安装了express，但是当我重新部署时，还是一样

因此，使用 react，您首先提供 index.html，然后一切都发生在该 html 中的脚本中。 （从这里我的术语可能不正确）CDN 服务根据 URI（第一个斜杠之后的组件）提供 index.html。因此，当您访问“yourapp.com/”时，会提供正确的根 html 文件并且您的应用程序可以正常工作。但是当您点击“yourapp.com/some-more-uri/”时，Firebase 会搜索“some-more-uri/”文件夹以查找要提供的 html 文件：404 错误！因此，对于任何 uri 请求，您都希望提供根 html 文件。

非常感谢您的回答，加上您的详细解释