A query parameter is part of the URL that allows additional parameters to be passed into a path. For example, "/products?search=redux" has a query parameter called search with a redux value.
Let's implement this example and allow the users of the shop to search for a product:
- Let's start by adding a variable in the state in ProductsPage.tsx called search, which is going to hold the search criteria:
interface IState {
products: IProduct[];
search: string;
}
- Given that we need to access the URL, we need to use RouteComponentProps as the props type in ProductsPage. Let's first import this:
import { RouteComponentProps } from "react-router-dom";
- We can then use this as the props type:
class ProductsPage extends React.Component<RouteComponentProps, IState> {
- We can initialize the search state to an empty string in constructor...