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:

1. In Header.tsx, start by removing useNavigate from import for the React Router and replace it with the Form component:

   import {

     NavLink,

     Link,

     useSearchParams,

     Form

   } from 'react-router-dom';

2. In the JSX, replace the form element with React Router’s Form component:

   <Form

     className="relative text-right"

     onSubmit={handleSearchSubmit}

   >

     <input ... />

   </Form>

3. In the Form element in the JSX, remove the onSubmit handler. Replace this with the following action attribute so that the form is sent to the products...