无法读取未定义的属性(读取"搜索")。不知道如何在 react-router 版本 6 中获取查询，react 18

Question

我错在哪里?

useEffect(() => {
if (user) {
navigate(
{ 
pathname: `/dashboard`,
}
);
}

}, []);
const navigate = useNavigate();
const queries = new URLSearchParams(navigate.location.search);

获取查询后执行查询。得到，还是没有定义，为什么?

Answer 1

假设你有一个这样的url:localhost:3000?param1=value1，你应该这样做从url参数中获取值:

const location = useLocation()
const [search, setSearch] = useSearchParams()
setSearch(location.search)
useEffect(() => {
const value1 = search.get("param1")
console.log(value1)
},[search])

然而，我宁愿建议使用钩子useParams，这样你就可以像这样直接获得参数:

const { param1} = useParams();
//param1 contains the value1

假设到该组件的路由为:

<Route path="/:param1" element={<App />} />

Answer 2

无法读取未定义的属性(读取'search')。不知道该怎么做要在react-router version 6中获取查询，请使用react 18

这里的问题是，似乎您正在假设react-router-dom@6navigate函数和react-router-dom@5history对象是一样的.

const queries = new URLSearchParams(navigate.location.search);

navigate.location是未定义的，所以当试图访问search属性时会抛出错误。

你不需要从location对象中读取search字符串，因为react-router-dom@6提供了一个useSearchParams钩子来返回当前URL的queryStringURLSearchParams对象和一个特殊的导航函数。

useSearchParams

useSearchParams钩子用于读取和修改URL中当前位置的查询字符串。像React自己的useState钩子一样，useSearchParams返回一个包含两个值的数组:当前位置的搜索参数和一个可以用来更新它们的函数。

您的代码转换为获取"查询";从"useSearchParams:

const navigate = useNavigate();
const [searchParams, setSearchParams] = useSearchParams(); // searchParams -> queries
useEffect(() => {
if (user) {
navigate("/dashboard");
}
}, []);

按常规获取queryString参数:

const param = searchParams.get("param");