javascript - react-router v6 history.location.search 替换

Question

在 react-router v5 中我可以使用

let keyword = history.location.search

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

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

Answer 1

总是情况是您应该访问 search来自 location 的值对象而不是 history对象。

参见 history is mutable

The history object is mutable. Therefore it is recommended to accessthe location from the render props of <Route>, not fromhistory.location. This ensures your assumptions about React arecorrect in lifecycle hooks.

如果教程显示使用 history.location.search我不会给它太大的权重。

在react-router-dom@6但是，不再有任何 route props ，即没有 history , location , 或 match Prop 。您可以通过 React hooks 访问所有这些。请注意 history对象也不再直接暴露给组件，取而代之的是 navigate通过 useNavigate 运行钩子(Hook)。

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

给定 URL "/somepath?someQueryParam=123"

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

...

const [searchParams, setSearchParams] = useSearchParams();

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

附加问题

Edit: Btw I am not so good at router and currently converting a codefrom v5 I was wondering what should keyword return in v5 ? The path Iam currently in?

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

检查 RRDv5 Query Parameters demo

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

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

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

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

let query = useQuery();

...

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