Learn React with TypeScript 3

Query parameters

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:

1. 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;}

2. 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";

3. We can then use this as the props type:

class ProductsPage extends React.Component< ...