title: How to redirect to log in page after click logout button on navbar header in React?
body: <p>I'm new to React.  I have react router config in App.js like this:</p>
  
  <pre><code>&lt;BrowserRouter&gt;
      &lt;div className="App"&gt;
        &lt;Header /&gt;
        &lt;Switch&gt;
          &lt;Route exact path="/" component={Home}&gt;
          &lt;/Route&gt;
          &lt;Route exact path="/management" component={Management}&gt;
          &lt;/Route&gt;
          &lt;Route exact path="/sign-up" component={SignUpForm}&gt;
          &lt;/Route&gt;
          &lt;Route exact path="/sign-in" component={SignInForm}&gt;
          &lt;/Route&gt;
          &lt;Route component={Error}&gt;
          &lt;/Route&gt;
        &lt;/Switch&gt;
      &lt;/div&gt;
    &lt;/BrowserRouter &gt;
  </code></pre>
  
  <p>I want header to show in every page, there's a button of logout at header, I want to redirect to /sign-in page after I click it. In my header component it's like this:</p>
  
  <pre><code>class Header extends Component {
  constructor(props) {
      super(props);
      this.state = {
          redirect: false
      }
  
  }
  logout = () =&gt; {
      sessionStorage.setItem("userToken", '');
      sessionStorage.clear();
      this.setState({ redirect: true });
  
  
  }
  render() {
      if (this.state.redirect) {
          return (
              &lt;Redirect to={'/sign-in'} /&gt;
          )
      }
  
  
      return (
          &lt;div&gt;
  
              &lt;Navbar collapseOnSelect expand="md" bg="dark" variant="dark" fixed="top" &gt;
                 ......
                          &lt;NavLink to="/management" className="header-link"&gt;&lt;FontAwesomeIcon icon="cog" size="lg" /&gt;&lt;/NavLink&gt;
                          &lt;button type='button' onClick={this.logout}&gt;Log Out&lt;/button&gt;
                      &lt;/Nav&gt;
                  &lt;/Navbar.Collapse&gt;
              &lt;/Navbar&gt;
          &lt;/div&gt;
      );
  }
  }
  export default Header;
  </code></pre>
  
  <p>There will be errors "Warning: You tried to redirect to the same route you're currently on: "/sign-in", and the nav bar will disappear only the body of sign-in shows. May I know what is the correct way to do this? I also tried this.props.history.push('/sign-in') but there's no props.history, probably because header is not in route? Should i use with Router? Or should I actually just make every page import header instead put it in app.js? or what is actually the right way to do this? Thank you so much for your help!</p>