在 react-router v6 的 mapStateToProps 中使用 urlParams

塞繆爾·班科爾

我的 mapStateToProps 需要組件 urlParams 來選擇 redux 存儲的一部分,我嘗試使用但我一直收到錯誤:“TypeError: ownProps.useParams is not a function”我的代碼

德魯里斯

如果我正確理解您的問題/代碼,您正在嘗試使用collectionId路由匹配參數作為selectCollection選擇器的鍵

react-router-domV6有這麼渲染組件不再路線道具需要使用掛鉤做出反應訪問navigatelocationmatch/ params可以走創建自定義withRouterHOC的路線,將匹配參數作為道具注入,並可供connectHOC訪問,但完全沒有必要使用兩個高階組件。

我建議在組件中使用鉤子。

import { useSelector } from 'react-redux';
import { useParams } from 'react-router-dom';

const CollectionPage = () => {
  const { collectionId } = useParams();
  const collection = useSelector(selectCollection(collectionId));

  return (
    ... JSX ...
  );
};

export default CollectionPage;

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用React Router V6实施受保护的路由

在 react-router-dom (v6) 中使用 Navlink 傳遞道具

在 react router v6 中使用導航功能時如何傳遞數據

React Router v6 - 如何在路由中使用@符号?

React Router V6 - useNavigate() 只能在 <Router> 組件的上下文中使用

React Router v6 onclick

React Router V6 activeStyle 问题

使用 react.js 和 react router v6 根据当前 URL 执行条件

MUI Drawer 不使用 React-router-dom v6 渲染

如何使用React Router v6将参数传递给链接?

如何启用 ListItemButton 以使用 React Router v6 Link?

react-router v6:使用 searchParams 导航到 URL

使用 <Navigate /> 傳遞 props (react-router-dom v6)

使用 react-router-dom v6 导航不起作用

react-router v6如何在react组件外使用navigator,比如axios拦截器

如何在 React Router v6 中重定向?

React Router Dom v6 中的重定向

React Router v6 `useRouter` Hook with `basename` 和 Redirection

React Router Dom V6 嵌套路由属性

react-router v6 双渲染组件

React-Router (experimental v6) 渲染问题?

React Navigation Router V6无效的挂钩调用

React Router v6 共享佈局

React-Router-Dom v6 中的重定向

React Router v6 更改 URL 但不呈现

React Router v6 不渲染任何东西

如何使用 react router v6 在一個父組件上的組件之間切換

使用 react-router-dom (v6) 成功登录后,Reactjs 重定向到仪表板页面

是否有任何方法可以在单击按钮时使用React Router v6打开页面