Re-render header after user logs in or logs out in react

Question

so the question may seem a little confusing so let me explain, this is my index file

<Router>
   <Header />
   <Switch>
      <Route exact path="/" component={HomePage} >
      </Route>
      <Route exact path="/Login/:step?" component={Login}>
      </Route>
   </Switch>
</Router>

and here is basically how i handle getting to homepage after user logs in

this.props.history.push("/")

so the problem here is when i do that the header component doesn't re-render and cause of that i can't call my api inside componentDidMount() inside of header to update user information.

Answer 1

Put Header in HomePage

and if you need put also in Login page.. but I don't think the login need the same header like in Homepage.

The main router component should be clean.

<Router>
   <Switch>
      <Route exact path="/" component={HomePage} >
        <Header />
      </Route>
      <Route exact path="/Login/:step?" component={Login}>
        <Header />
      </Route>
   </Switch>
</Router>

• If your app is getting big for - update user information - think of using state management like Redux