title: Page navigation using button including a counter in React
body: <p>I want to add a next button on this home page (which also consists of a counter). But the counter is implemented inside a class so I am not able to use useHistory(). Also I cannot place the function routeChange() (error pops-up everytime) anywhere inside/outside the class, what to do?I am a newbie in React and I have been stuck around this problem for hours now please. Apologies if my question is too dumb for the platform. Following is my approach-</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import Button1 from &quot;./Button1&quot;;
  import { Button, } from 'reactstrap';
  import {useHistory} from &quot;react-router-dom&quot;;
  import &quot;./App.css&quot;;
  function Layout(){
  const history = useHistory();
    const routeChange = () =&gt;{
    let path = '/time'; 
    history.push(path);
    }
    return (
      &lt;div className=&quot;App&quot;&gt;                    
          &lt;Button color=&quot;primary&quot;
           onClick={routeChange}
            &gt;
              Next
          &lt;/Button&gt;
      &lt;/div&gt;
  );
  }
  
  class  Home extends Component {
  
    constructor() {
      super();
      this.state = {
        count: 0
      };
    }
    
   
    incrementCount = () =&gt; {
      this.setState({
        count: this.state.count + 1
      });
    };
  
    decrementCount = () =&gt; {
      this.setState({
        count: this.state.count - 1
      });
    };
  
    render() {
      let { count } = this.state;
      return (
        &lt;div className=&quot;app&quot;&gt;
          &lt;div&gt;
            &lt;div class=&quot;count&quot;&gt;
              &lt;h3&gt;Counter:&lt;/h3&gt;
              &lt;h1&gt;{count}&lt;/h1&gt;
            &lt;/div&gt;
            &lt;div class=&quot;buttons&quot;&gt;
              &lt;Button1 title={&quot;-&quot;} action={this.decrementCount} /&gt;
              &lt;Button1 title={&quot;+&quot;} action={this.incrementCount} /&gt;
            &lt;/div&gt;
            &lt;div&gt;
              {this.Layout()};
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  export default Home;
  </code></pre>
  <p>I am getting : this.Layout is not a function</p>