react-router v6 history.location.search替换

Question

在react-router v5 我能够使用

let keyword = history.location.search

但是在react-router v6 中出现错误，那么该代码的替换是什么？

编辑：顺便说一句，我不太擅长路由器，目前正在从 v5 转换代码。 我想知道 v5 中的关键字应该返回什么？ 我目前所处的路径？

Answer 1

例如 url: https://example.com/?foo=bar

import { useSearchParams } from 'react-router-dom'

const Component = () => {
  const [searchParams, setSearchParams] = useSearchParams()
  const foo = searchParams.get('foo')
  console.log(foo) // "bar"
  return <></>
}

显然，您需要在路由器内部使用它。

注意：所有搜索参数值都是字符串。

Answer 2

通常情况下，您应该从location object 而不是history object 访问search值。

看到 历史是可变的

历史 object 是可变的。 因此建议从<Route>的 render props 访问location ，而不是从history.location访问。 这可以确保你对 React 的假设在生命周期钩子中是正确的。

如果本教程使用history.location.search显示，我不会给予太多重视。

然而，在react-router-dom@6中，不再有任何route props ，即没有history 、 location或match道具。 相反，您可以通过 React 钩子访问这些。 请注意， history object 也不再直接暴露给组件，而是通过useNavigate钩子navigate function 代替。

为了访问 queryString，RRDv6 引入了一个新的useSearchParams钩子。

给定 URL "/somepath?someQueryParam=123"

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

...

const [searchParams, setSearchParams] = useSearchParams();

const someQueryParam = searchParams.get("someQueryParam"); // 123

附加问题

编辑：顺便说一句，我不太擅长路由器，目前正在从 v5 转换代码我想知道关键字在 v5 中应该返回什么？ 我目前所处的路径？

location.search是一个字符串，因此您可以手动处理该字符串，或者创建一个URLSearchParams object。

检查 RRDv5查询参数演示

他们创建了一个自定义useQueryHook ：

function useQuery() {
  const { search } = useLocation();

  return React.useMemo(() => new URLSearchParams(search), [search]);
}

然后使用 getter 访问命名查询参数：

let query = useQuery();

...

const name = query.get("name");

Answer 3

v5 中的 useHistory-hook 已在 React Router v6 中替换为 useNavigate-hook。 这可以在升级文档中检查。 有关 useNavigate 的更多信息，请查看文档。