title: ReactJS Router- How to use history push within function component with parameters?
body: <p>I'm having problems using <code>history.push(&quot;path/...&quot;)</code> within a function component. My problem is when i try to use a function component's param in the button handler. I have the next code:
  <code>Example.js</code></p>
  <pre><code>...
  import {useHistory} from 'react-router-dom';
  ...
  
  //This function works fine, but i would prefer something reusable
  function Button() {
      const history = useHistory();
      function handle(){
          history.push(&quot;/path&quot;); //The path is harcoded
      }
      return(
          &lt;button onClick={handle}&gt;
              Home //This text is harcoded
          &lt;/button&gt;
      );
  }
  
  //This is what i'm looking for, because i would write it once.
  function Button(path, text) {
      const history = useHistory();
      function handle(){
          history.push(path); //This doesn't work
      }
      return(
          &lt;button onClick={handle}&gt;
              {text} //This throws an error &quot;no valid react child&quot;
          &lt;/button&gt;
      );
  }
  
  //this component is being render as a child of BrowserRouter
  class Example extends Component{
      render(){
          return(
              &lt;div&gt;
                  &lt;Button path=&quot;path/...&quot;/&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export ...
  
  </code></pre>
  <p>This is my actual code, just removed repeated lines. With the first function component i have no problems, but, I'm in the need to create a new function component for every button. Instead i'm looking for a way to write this functions once and use it to create many buttons.</p>
  <p>The second function does nothing when the path is being passed through props, and if I add <code>console.log(path)</code> in the <code>handle()</code>, the path value is printed as it is passing correctly, but <code>history.push(path)</code> does not take it.</p>
  <p>I want to add that, the only clue I have is the push method documents, where the types this method takes are <code>string</code>, but <code>any</code> is being passed.</p>