Why after deploying my project got stuck/blank page? React Router Dom | Params

Question

I'm still upgrading my knowledge about react-router-dom and Reactjs, I've built some project who end up using react-router-dom for my router, and somehow when I make it in develop mode (localhost:3000/detailevent/4) it works well in case of sending params to another function, but, when I deploy it to firebase, it got stuck, every time I go to www.somewebpage.com/detailevent/4 it just got a blank page, what just happened? did I need to change something in case of "production"?

oh ya, this is my code just in case you guys need to see:

//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>

And this is the code in 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!");
      }
    });
  }

If I run it in my localhost (localhost:3000/detailevent/4), it works, all good, but after I deploy it on my firebase, Detailevent.js always got stuck when I access www.somewebpage.com/detailevent/4 (using the url that firebase generate) (not in my localhost, my project in localhost still good and accessable), did you guys know what happened?

EDIT: I got 404 error page (blank page)

score 0 · Answer 1 · answered Jun 07 '20 at 06:14

0

I have not used firebase, but I have experienced similar errors with AWS.

In my case it was the 404 error, because there was no /detailevent/:id folder to look for index.html file.

Try serving your root index.html file for the general error cases like in this question

Though I am not so sure since you saw a blank page, not a 404 error page.

answered Jun 07 '20 at 06:14

Hyunwoong Kang

530
2
9

Yaaa, i got 404 error page, so what i need to do next? i already seen this article https://create-react-app.dev/docs/deployment/#serving-apps-with-client-side-routing, but i can't understand, i'm already install express but when i redeploy, still the same – Haksatrya Bhaswara Jun 07 '20 at 07:08
So with react, you serve your index.html first, and everything happens with the script in side that html. (My terminologies may be incorrect from here) CDN services serves index.html depending on the URI (the components after the first slash). So when you visit "yourapp.com/", the correct root html file is served and your app works. But when you hit "yourapp.com/some-more-uri/", Firebase searched for "some-more-uri/" folder to look for the html file to serve: 404 Error! So for any uri request, you want to serve your root html file. – Hyunwoong Kang Jun 07 '20 at 08:04
1

I am very grateful for your answer, coupled with your detailed explanation – Haksatrya Bhaswara Jun 07 '20 at 10:17

score 0 · Accepted Answer · edited Jun 07 '20 at 08:36

0

Anyway, now it's running great, everything works fine.

I don't know where's the problem, I just installed express, added the NoMatch (for 404 page) Components, and deleted node_modules (installed it back with npm install), and deployed it again, honestly I didn't know where the problem was.

edited Jun 07 '20 at 08:36

Ajeet Shah

18,551
8
57
87

answered Jun 07 '20 at 07:22

Haksatrya Bhaswara

187
2
17

Why after deploying my project got stuck/blank page? React Router Dom | Params

2 Answers2