title: Redirecting to another page(route) from a React class component
body: <p>I need some help to solve the following issue with using <code>React</code>.</p>
  <p>In some web app I have a landing page, where I want to redirect the user to the login page in case she or he is not logged in.</p>
  <p>I want to use the following landing page (taken from some tutorial I found on the net) in order to use it as a model for mine.</p>
  <p>The problem is that this is a <em>function component</em> while my landing page is a <em>class component</em>. According to what I understand I guess I need to consider the code inside <em>useEffect</em> and (somewhat) transfer it to <em>componentDidMount()</em> in my <em>class component</em>. But I don't know how to do that. <em>history.replace</em> will not work in a <em>class component</em> (no Hooks in Classes). Any advice from a more <code>React</code> experienced  user will be very welcome.</p>
  <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  import { useAuthState } from &quot;react-firebase-hooks/auth&quot;;
  import { useHistory } from &quot;react-router&quot;;
  import &quot;./Dashboard.css&quot;;
  import { auth, db, logout } from &quot;./firebase&quot;;
  
  ....
  
  function Dashboard() {
    const [user, loading, error] = useAuthState(auth);
    const [name, setName] = useState(&quot;&quot;);
    const history = useHistory();
  
    ....
  
    useEffect(() =&gt; { // Important part for my question !
      if (loading) return;
      if (!user) return history.replace(&quot;/&quot;);
      ....
    }, [user, loading]);
  
    return (
      &lt;div&gt;
        {/*...*/}
        &lt;button className=&quot;dashboard__btn&quot; onClick={logout}&gt;
          Logout
        &lt;/button&gt;
      &lt;/div&gt;
    );
  }
  
  export default Dashboard;
  </code></pre>
  <p>Here is what I tried on my Class Component:</p>
  <pre><code>class MyCompo extends React.Component {
    constructor(props) {
      super(props);
    }
  
    componentDidMount() {
      console.log(&quot;--componentDidMount(MyCompo)--&quot;);
      const { history } = this.props
      history.push(&quot;/login&quot;);
    }
    .....
  }
  </code></pre>
  <p>But I get the following error:</p>
  <pre><code>TypeError: history is undefined
  componentDidMount
  </code></pre>
  <p>=============== Added information ===============</p>
  <p>Below is the relevant part of the code I have been working on:</p>
  <p>This part is what works:</p>
  <pre><code>&lt;Route exact path=&quot;/&quot; component={TopMenu}&gt;
      {true &amp;&amp; &lt;Redirect to=&quot;/login&quot; /&gt;}
  &lt;/Route&gt;
  </code></pre>
  <p>What I tried in the Links Component did not work.</p>
  <p>The code:</p>
  <pre><code>....
  
  ReactDOM.render(
    &lt;Router&gt;
      &lt;Switch&gt;
        &lt;Route exact path=&quot;/&quot; component={TopMenu}&gt;
          {true &amp;&amp; &lt;Redirect to=&quot;/login&quot; /&gt;}
        &lt;/Route&gt;
        &lt;Route exact path=&quot;/login&quot; component={Login} /&gt;
        &lt;Route exact path=&quot;/section1&quot; component={Section1Page}/&gt;
        &lt;Route exact path=&quot;/section2&quot; component={Section2Page}/&gt;
        &lt;Route exact path=&quot;/section3&quot; component={Section3Page}/&gt;
      &lt;/Switch&gt;
    &lt;/Router&gt;,
    document.getElementById('root')
  );
  
  ....
  
  const TopMenu = () =&gt; {
      return (
          &lt;div className='page_container'&gt;
              &lt;Title/&gt;
              &lt;Links path='/'/&gt;
              &lt;button className=&quot;dashboard__btn&quot; onClick={logout}&gt;
                  Logout
              &lt;/button&gt;
          &lt;/div&gt;
      )
  };
  
  
  class Links extends React.Component {
      constructor(props) {
        super(props);
      }
    
      componentDidMount() {
        console.log(&quot;--componentDidMount(Links)--&quot;);
        // This is some code I tried with no success.
        const { history } = this.props
        //history.push(&quot;/login&quot;);
      }
    
      componentDidUpdate(prevProps, prevState) {
        console.log(&quot;--componentDidUpdate(Links)--&quot;);
      }
    
      render() {
      return (
              &lt;div className='links_container'&gt;
                  {(this.props.path != '/mng') &amp;&amp;
                      &lt;React.StrictMode&gt;
                          &lt;Link to='/mng'&gt;{mnMgrStr()}&lt;/Link&gt;&lt;br/&gt;
                      &lt;/React.StrictMode&gt;}
                  {(this.props.path != '/other') &amp;&amp;
                      &lt;React.StrictMode&gt;
                          &lt;Link to='/other'&gt;{otherInpStr()}&lt;/Link&gt;&lt;br/&gt;
                      &lt;/React.StrictMode&gt;}
                   .......
              &lt;/div&gt;
          )
      }
  }
  </code></pre>