Learn React with TypeScript 3

Declaring routes

We declare the pages in our app using the BrowserRouter and Route components. BrowserRouter is the top-level component and this looks for Route components beneath it to determine all the different page paths.

We are going to declare some pages in our app using BrowserRouter and Route later in this section, but before that we need to create our first two pages. This first page is going to contain the list of our React tools that we are going to sell in our shop. We use the following steps to create our pages:

1. So, let's start by creating the data for our list of tools by creating a ProductsData.ts file with the following content:

export interface IProduct {  id: number;  name: string;  description: string;  price: number;}export ...