title: Follow link when pressing enter
body: <p>I am using the react-router to pass input data from a search box when the user clicks the search button. However, when I press enter the input doesn't get passed over and the page just refreshes. Is there anyway I could set it so when the enter key is pressed the Nav routing happens?</p>
  <pre><code>import React, {useState} from 'react'
  import '../sass/custom.scss';
  import {Nav, Form, FormControl} from 'react-bootstrap';
  import 'bootstrap/dist/css/bootstrap.min.css';
  import {NavLink} from 'react-router-dom';
  
  export const SearchBar = () =&gt; {
      let [query, setQuery] = useState(&quot;&quot;)
  
      return (
          &lt;div className=&quot;search-container&quot;&gt;
              &lt;div className=&quot;row height d-flex justify-content-center align-items-center&quot;&gt;
                  &lt;div className=&quot;col-xs-12 col-sm-12 col-md-8 col-lg-8 my-5&quot;&gt;
                      &lt;div className=&quot;search&quot;&gt; &lt;i className=&quot;fa fa-search&quot;&gt;&lt;/i&gt; 
                          &lt;Form className='d-flex mx-auto'&gt;
                              &lt;FormControl
                                  type='search'
                                  placeholder='Search'
                                  className='form-control'
                                  aria-label='Search'
                                  onChange={e =&gt; setQuery(e.target.value) }
                              /&gt;
                              &lt;Nav.Link 
                                  as={NavLink} 
                                  exact={true} 
                                  to={{pathname:`/search`, state: `${query}` }} 
                                  className=&quot;search-button center btn btn-primary&quot;
                                  &gt;
                                  Search
                              &lt;/Nav.Link&gt;                
                          &lt;/Form&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>