title: how to redirect to partical page using history object in react-router-dom v6
body: <p>I am using &quot;react-router-dom&quot; v6. When i try to redirect to another page using history object i got the following ERROR:</p>
  <pre><code>Cannot read properties of undefined (reading 'push')
  </code></pre>
  <p>Here is my code:</p>
  <pre><code>const Search = ({ history }) =&gt; {
    const [keyword, setKeyword] = useState(&quot;&quot;);
  
    const searchSubmitHandler = (e) =&gt; {
      e.preventDefault();
      if (keyword.trim()) {
        history.push(`/products/${keyword}`);
      } else {
        history.push(&quot;/products&quot;);
      }
    };
  }
  
  function App() {
    return (
      &lt;Router&gt;
        &lt;div className=&quot;App&quot;&gt;
          &lt;Routes&gt;
            &lt;Route exact path=&quot;/&quot; element={&lt;Home /&gt;} /&gt;
            &lt;Route exact path=&quot;/product/:id&quot; element={&lt;ProductDetails /&gt;} /&gt;
            &lt;Route exact path=&quot;/products&quot; element={&lt;Products /&gt;} /&gt;
  
            &lt;Route exact path=&quot;/search&quot; element={&lt;Search /&gt;} /&gt;
          &lt;/Routes&gt;
          &lt;Footer /&gt;
        &lt;/div&gt;
      &lt;/Router&gt;
    );
  </code></pre>
  <p>}</p>