Using form navigation
In this section, we will use React Router’s Form component to navigate to the products list page when the search criteria are submitted. Form is a wrapper around the HTML form element that handles the form submission on the client side. This will replace the use of useNavigate and simplify the code. Carry out the following steps:
- In
Header.tsx, start by removinguseNavigatefromimportfor the React Router and replace it with theFormcomponent:import {NavLink,
Link,
useSearchParams,
Form
} from 'react-router-dom';
- In the JSX, replace the
formelement with React Router’sFormcomponent:<Form
className="relative text-right"
onSubmit={handleSearchSubmit}>
<input ... />
</Form>
- In the
Formelement in the JSX, remove theonSubmithandler. Replace this with the followingactionattribute so that the form is sent to theproducts...