11、React开发：路由查询参数、懒加载与表单处理

React开发：路由查询参数、懒加载与表单处理

1. 使用查询参数

查询参数是URL的一部分，用于向路径传递额外参数。例如， /search?criteria=typescript 中的 criteria 就是一个查询参数，其值为 typescript 。以下是在搜索页面实现查询参数的步骤：
1. 在 QuestionsData.ts 中创建模拟搜索的函数：

export const searchQuestions = async (
  criteria: string,
): Promise<QuestionData[]> => {
  await wait(500);
  return questions.filter(
    q =>
      q.title.toLowerCase()
        .indexOf(criteria.toLowerCase()) >= 0 ||
      q.content.toLowerCase()
        .indexOf(criteria.toLowerCase()) >= 0,
  );
};

2. 将所需函数和组件导入 SearchPage.tsx ：

/** @jsxImportSource @em