Declaring routes
We will start this section by creating a page component that lists the app’s products. We will then learn how to create a router and declare routes using React Router’s createBrowserRouter
function.
Creating the products list page
The products list page component will contain the list of the React tools in the app. Carry out the following steps to create this:
- We will start by creating the data source for the page. First, create a folder called
data
in thesrc
folder and then a file calledproducts.ts
withindata
. - Add the following content into
products.ts
(you can copy and paste it from the GitHub repository at https://github.com/PacktPublishing/Learn-React-with-TypeScript-2nd-Edition/blob/main/Chapter6/src/data/products.ts):export type Product = {
id: number,
name: string,
description: string,
price: number,
};
export const products: Product[] = [
{
description...