React 中获取 URL 查询参数：window.location.search使用示例

要在 React 应用程序中获取 URL 查询参数，您可以使用 window.location.search 获取查询字符串，然后解析它以提取所需的信息。以下是在 TypeScript + React 环境中的示例代码：

import React, { useEffect, useState } from 'react';

interface QueryParams {
  [key: string]: string | undefined;
}

function parseQueryParams(queryString: string): QueryParams {
  const params: QueryParams = {};

  queryString
    .substring(1)
    .split('&')
    .forEach((param) => {
      const [name, value] = param.split('=');
      params[name] = decodeURIComponent(value);
    });

  return params;
}

function App() {
  const [queryParams, setQueryParams] = useState<QueryParams>({});

  useEffect(() => {
    const queryParams = parseQueryParams(window.location.search);
    setQueryParams(queryParams);
  }, []);

  console.log(queryParams); // 这里可以查看到所有查询参数

  return (
    <div>
      {/* 使用 queryParams.aaa 访问 aaa 参数 */}
    </div>
  );
}

export default App;

在这个示例中，我们首先定义了一个名为 parseQueryParams 的辅助函数，用于从查询字符串中解析参数。然后，在 App 组件中，我们使用 useEffect Hook 初始化 queryParams 状态变量，以便在组件挂载时获取查询参数。最后，我们可以使用 queryParams.aaa 访问 aaa 参数。

请注意，这种方法仅适用于客户端渲染的应用程序。对于服务器端渲染，你可能需要使用不同的方法来获取 URL 查询参数。