react路由器v6历史.位置.搜索替换

Question

在react-routerv5中，我能够使用

let keyword = history.location.search

但在react-routerv6中，我得到了一个错误，那么该代码的替代品是什么？

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

Answer 1

您应该从location对象而不是history对象访问search值，这是始终的情况。

查看历史是可变的

历史对象是可变的。因此，建议访问来自<Route>的渲染道具的location，而不是来自history.location。这确保了您对React的假设纠正生命周期中的挂钩。

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

然而，在react-router-dom@6中，不再有任何路由道具，即没有history、location或match道具。相反，您可以通过React挂钩访问这些内容。请注意，history对象也不再直接暴露给组件，而是通过useNavigate钩子由navigate函数替换。

为了访问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中关键字应该返回什么？路径I我目前在？

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

查看RRDv5查询参数演示

他们创建了一个自定义的useQueryHook:

function useQuery() {
const { search } = useLocation();
return React.useMemo(() => new URLSearchParams(search), [search]);
}

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

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

Answer 2

示例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 <></>
}

显然，你需要在路由器中使用这个。

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