从 react-router-dom 中获取搜索值

有时候，我们需要从 URL 中获取一些参数或者搜索值，以便用于后续的数据处理或者页面渲染。

在 React 中，我们可以使用 react-router-dom 中提供的 Hook 来轻松获取搜索值。接下来，让我们了解如何从 react-router-dom 中获取搜索值。

使用 react-router-dom 中的 useLocation

useLocation 是一个从 react-router-dom 提供的 Hook，它会返回当前 URL 的信息，包括实际的 URL、路径和搜索参数等。

import { useLocation } from 'react-router-dom';

function MyComponent() {
  const { search } = useLocation();
  return <div>搜索值：{search}</div>;
}

在上述代码中，我们通过调用 useLocation Hook 来获取当前的 URL 信息，然后从中提取了搜索参数 search。

请注意，返回的 search 参数包含了问号（?）和参数名、值之间的等号（=）。例如，对于 URL http://example.com/?q=react-router，则搜索值为 ?q=react-router。

如果您只需要获取搜索参数的值，您可以把搜索参数字符串传给 URLSearchParams 构造函数来进行解析。

import { useLocation } from 'react-router-dom';

function MyComponent() {
  const { search } = useLocation();
  const params = new URLSearchParams(search);
  const q = params.get('q');
  return <div>搜索关键词：{q}</div>;
}

在上述代码中，我们先使用 URLSearchParams 构造函数解析搜索参数字符串，再通过 get 方法获取搜索关键词的实际值。

结论

在本文中，我们介绍了如何从 react-router-dom 中获取搜索值。 通过使用 useLocation 和 URLSearchParams 帮助程序员快速轻松地获取搜索值，这对于一些需要根据 URL 参数进行页面渲染或数据处理的场景会非常有用。

希望本文能够对你有所帮助。如果你还有其它的问题或建议，请在评论中留言。