title: React : How to change route on onChange event of input
body: <p>I want to change the Route whenever I input text in input field and pass the input value to <code>&lt;Search /&gt;</code> component route. this is my input field.</p>
  <pre><code>&lt;input type=&quot;search&quot; value={searchInput} onChange={handleChange} placeholder=&quot;Search...&quot; /&gt;
  </code></pre>
  <p>this is the route that I created.</p>
  <pre><code>&lt;Route path=&quot;/search/:searchInput&quot;&gt;
     &lt;Search /&gt;
  &lt;/Route&gt;
  </code></pre>
  <p>I have handled the input value but can't seem figure how to change the component whenever I enter into input box. can you please help me. I also want to pass the input value to the route.</p>
  <pre><code>const [searchInput, setSearchInput] = useState(&quot;&quot;)
  
  const handleChange = (e) =&gt; {
      e.preventDefault();
      setSearchInput(e.target.value)
  }
  </code></pre>
  <p>this is my navigation component :</p>
  <pre><code>const Navigation = () =&gt; {
    let history = createHashHistory();
    const [searchInput, setSearchInput] = useState(&quot;&quot;)
  
    const handleChange = (e) =&gt; {
      e.preventDefault();
      setSearchInput(e.target.value)
    }
    useEffect(() =&gt; {
      const params = new URLSearchParams();
      if (searchInput) {
        params.append(&quot;query&quot;, searchInput);
      } else {
        params.delete(&quot;query&quot;);
      }
      history.push({ search: params.toString() });
    }, [searchInput, history]);
  
    return (
      &lt;Router&gt;
        &lt;div className='navigation'&gt;
          &lt;div className=&quot;right-content&quot;&gt;
            &lt;div className=&quot;search&quot;&gt;
              &lt;img style={{ padding: &quot;2px&quot; }} src={search} alt=&quot;search&quot; /&gt;
              &lt;input type=&quot;search&quot; value={searchInput} onChange={handleChange} placeholder=&quot;Search...&quot; /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;Switch&gt;
          &lt;Route path=&quot;/search&quot; component={Search}&gt;
          &lt;/Route&gt;
        &lt;/Switch&gt;
      &lt;/Router&gt;
    )
  }
  
  export default Navigation
  </code></pre>
  <p>and this is my Search Component :</p>
  <pre><code>const Search = () =&gt; {
  
      const value = new URLSearchParams(window.location.search).get(&quot;query&quot;);
  
      console.log(value)
  
  }
  </code></pre>
  <p>I imported the search component in navigation. I want to go the Search component when I input.</p>