封装withRouter高阶组件

原创已于 2023-04-29 22:49:20 修改 · 237 阅读

本内容遵循CC 4.0 BY-SA版权协议

于 2023-04-29 19:58:23 首次发布

文章展示了在React应用中如何使用`react-router-dom`库进行导航管理，包括`useNavigate`、`useLocation`、`useSearchParams`和`useParams`钩子的用法。同时，它也涉及到Redux的状态管理，通过`useDispatch`和`useSelector`来获取和更新应用状态。`withRouter`高阶组件被用于将路由相关的方法传递给组件。在Home组件中，定义了菜单和路由跳转的逻辑。

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是来自高阶组件传递的值

标签