Follow link when pressing enter - reactjs

Question

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?
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 = () => {
let [query, setQuery] = useState("")
return (
<div className="search-container">
<div className="row height d-flex justify-content-center align-items-center">
<div className="col-xs-12 col-sm-12 col-md-8 col-lg-8 my-5">
<div className="search"> <i className="fa fa-search"></i>
<Form className='d-flex mx-auto'>
<FormControl
type='search'
placeholder='Search'
className='form-control'
aria-label='Search'
onChange={e => setQuery(e.target.value) }
/>
<Nav.Link
as={NavLink}
exact={true}
to={{pathname:`/search`, state: `${query}` }}
className="search-button center btn btn-primary"
>
Search
</Nav.Link>
</Form>
</div>
</div>
</div>
</div>
)
}

Answer 1

Might not be the best solution, but you may give it a try
Just add onKeyPress on FormControl to track "enter key" and add preventDefault on form tag to prevent your page from reloading.
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, useHistory } from "react-router-dom";
export const SearchBar = () => {
let [query, setQuery] = useState("");
const history = useHistory();
return (
<div className="search-container">
<div className="row height d-flex justify-content-center align-items-center">
<div className="col-xs-12 col-sm-12 col-md-8 col-lg-8 my-5">
<div className="search">
<i className="fa fa-search"></i>
<Form
className="d-flex mx-auto"
onSubmit={(e) => e.preventDefault()}
>
<FormControl
type="search"
placeholder="Search"
className="form-control"
aria-label="Search"
onChange={(e) => setQuery(e.target.value)}
onKeyPress={(e: any) => {
if (e.nativeEvent.charCode === 13) {
history.push({ pathname: `/search`, state: `${query}` });
}
}}
/>
<Nav.Link
as={NavLink}
exact={true}
to={{ pathname: `/search`, state: `${query}` }}
className="search-button center btn btn-primary"
>
Search
</Nav.Link>
</Form>
</div>
</div>
</div>
</div>
);
};