14、React Router 使用指南：路由参数、错误页面、索引路由与搜索功能

React Router 使用指南：路由参数、错误页面、索引路由与搜索功能

1. 路由参数的使用

1.1 路由参数简介

路由参数是路径中可变的部分，使用冒号加参数名来定义。在 React Router 中，可以使用 useParams 钩子来访问这些参数。例如：

type Params = {
    customerId: string;
    taskId: string;
};

需要注意的是，路由参数的值始终是字符串，因为它们是从路径中提取的。

1.2 在应用中使用路由参数

我们将为应用添加一个产品页面，用于显示每个产品的描述和价格。页面路径将包含一个产品 ID 的路由参数。具体操作步骤如下：
1. 创建产品页面 ：在 src/pages 文件夹中创建一个名为 ProductPage.tsx 的文件，并添加以下导入语句：

import { useParams } from 'react-router-dom';
import { products } from '../data/products';

2. 创建 ProductPage 组件 ：