title: Use Navigate function not working (React)
body: <p>I'm following a tutorial and everything was going great until I tried to implement Navigation through a search input. For instance, If I am on http://localhost:3000/searched/profile. Typing out an input of 'names' in the search bar should take me to http://localhost:3000/searched/names. In the tutorial it worked that way and I believe I did the same thing but it doesn't work for me</p>
  <p>First below is the Search component for the search bar and its input</p>
  <p>And then the Pages where my routing is done. My Browser Router is in the App.js.</p>
  <pre><code>import styled from &quot;styled-components&quot;
  import { FaSearch } from 'react-icons/fa'
  import { useState } from 'react'
  import {useNavigate} from 'react-router-dom'
  
  function Search() {
  
    const [input, setInput] = useState('');
    const navigate = useNavigate();
  
    const submitHandler = (e) =&gt; {
      e.preventDefault();
      navigate('/searched/' + input) (I GUESS THIS IS WHAT IS NOT WORKING)
    };
  
    return (
      &lt;FormStyle onSubmit={submitHandler}&gt;
      &lt;div&gt;
      &lt;FaSearch&gt;&lt;/FaSearch&gt;
      &lt;input onChange={(e) =&gt; setInput(e.target.value)} type=&quot;text&quot; value={input}/&gt;
      &lt;/div&gt;
      &lt;h1&gt;{input}&lt;/h1&gt;
      &lt;/FormStyle&gt;
    )
  }
  
  const FormStyle = styled.div`
    margin: 0 20rem;
  
    div{
      width: 100%;
      position: relative;
    }
    input{
      border: none;
      background: linear-gradient(35deg, #494949, #313131);
      border-radius: 1rem;
      outline: none;
      font-size: 1.5rem;
      padding: 1rem 3rem;
      color: white;
      width: 100%;
    }
    svg{
      position: absolute;
      top: 50%;
      left: 0%;
      transform: translate(100%, -50%);
      color: white;
    }
  `
  
  export default Search
  </code></pre>
  <p>Pages</p>
  <pre><code>import Home from &quot;./Home&quot;
  import { Route, Routes } from 'react-router-dom'
  import Cuisine from &quot;./Cuisine&quot;
  import Searched from &quot;./Searched&quot;
  
  
  function Pages() {
  
    return (
      &lt;Routes&gt;
        &lt;Route path='/' element={&lt;Home/&gt;} /&gt;
        &lt;Route path='/cuisine/:type' element={&lt;Cuisine/&gt;} /&gt;
        &lt;Route path='/searched/:search'  element={&lt;Searched/&gt;} /&gt;
      &lt;/Routes&gt;
    )
  }
  
  export default Pages
  </code></pre>