Question

我仍在升级有关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）（不在我的本地主机中，我在本地主机中的项目仍然可以访问），你们知道发生了什么吗？

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

Answer 1

我没有使用过Firebase，但是我在AWS中遇到了类似的错误。

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

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

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

Answer 2

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

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

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

2 个答案: