类组件中路由与状态管理实现方法.pdfVIP

类组件中如何使用路由和状态管理

由于我们的路由和状态管理采用了大量的use函数，而use函数只能在函数组件中使用，那么路由和状态管理该如何在类组件中应用呢？

可以利用高阶组件HOC的方式来解决这个问题，具体代码如下：

import

React,

{

Component

}

from

react

import

{

useLocation,

useNavie,

useParams

}

from

react‑router‑dom;

import

{

useSelector,

useDispatch

}

from

react‑redux

function

withRouter(Component)

{

function

ComponentWithRouterProp(props)

{

let

location

=

useLocation();

let

navie

=useNavie();

let

params

=useParams();

let

count

=useSelector((state)=state.users.count)

let

dispatch

=

useDispatch()

return

(

Component

{...props}

router={{location,

navie,

params}}

st