Search code examples
reactjsreact-routerfirebase-hosting

Different react routing result between local and firebase

When i finished my basic routing structure and tested it on Localhost, everything worked fine.

Mycode:

const Routes = () => {

  return (
    <Router>
      <Header />
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/groups" component={AllGroups} />
        <Route exact path="/discussion" component={Discussion} />
        <Route exact path="/group" component={Group} />
        <Route exact path="/profile" component={Profile} />
        <Route exact path="/search" component={Search} />
      </Switch>
    </Router>
  )
}

However, when i deployed it on Firebase, everything become a whole mass:

For example, i got this page on http://localhost:3000/search.

enter image description here

But got this on Firebase(Home component).

enter image description here

The others, groups, group is OK, but discussion, profile, search also show the Home component.

What did i do wrong?

Solution

  • Well, it turns out the Firebase takes some time to compile, just like Heroku.

    This morning i inputted '/search' again and could get a correct result.

    enter image description here