import {useNavigate,useLocation,useSearchParams,useParams} from 'react-router-dom'
function withRouter(WrapComponent){
const navigate = useNavgiate()
const location = useLocation()
const [searchParams] = useSearchParams()
const params = useParams()
return function(props){
return <WrapComponent {...props} navigate={navigate } location={location } query={searchParams} params={params }>
</WrapComponent>
}
}
export default withRouter
Home组件:
import React, { useState, useEffect } from 'react'
import { Outlet} from 'react-router-dom'
import {useSelector,useDispatch} from 'react-redux'
import { Layout,Menu } from 'antd'
import {getMenusAsync,getRoutesAsync} from '../../redux/modules/loginRedux'
import '../../assets/css/home.scss'
import withRouter from '../../hoc/withRouter'
const {Header,Footer,Sider,Content} = Layout
function Home(props) {
const [img, SetImg] = useState('')
const dispatch = useDispatch()
useEffect(() => {
const img = require('../../assets/logo.png')
SetImg(img)
dispatch(getMenusAsync)
dispatch(getRoutesAsync)
},[])
// 获取菜单
const menus = useSelector((state)=>{
return state.login.menus
})
// 路由跳转事件
const routerJump = (item)=>{
console.log(item);
props.navigate(item.key)
}
return (
<Layout className='Home-container'>
<Sider className='Home-container-sider' style={{backgroundColor:'#404a59'}}>
<img src={img} alt="" />
<Menu
className='Home-container-sider-menu'
items={menus}
mode='inline'
theme='dark'
onClick={routerJump}
style={{backgroundColor:'#404a59'}}
></Menu>
</Sider>
<Layout className='Home-container-right'>
<Header></Header>
<Content className='Home-container-content'>
<Outlet></Outlet>
</Content>
<Footer></Footer>
</Layout>
</Layout>
)
}
export default withRouter(Home)
注意:组件中接收到的props是来自高阶组件传递的值