react根据路由切换页面

最新推荐文章于 2025-06-11 18:56:31 发布

guoyu_vae

最新推荐文章于 2025-06-11 18:56:31 发布

阅读量770

点赞数

CC 4.0 BY-SA版权

分类专栏： React

本文链接：https://blog.csdn.net/weixin_44233592/article/details/113782609

React 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一个使用React和Ant Design实现的可折叠侧边栏组件。该组件能够根据当前路径高亮显示相应的菜单项，并支持二级菜单。文章还展示了如何通过Redux管理组件状态以及如何与路由进行交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import * as React from 'react'
import { Menu } from 'antd'
import * as styles from './Aside.module.less'
import { DoubleRightOutlined,DoubleLeftOutlined } from '@ant-design/icons'

import routes from '../../../router'
import { RouteComponentProps, withRouter } from 'react-router-dom'
import { IMenuInfo } from 'src/types'
import { connect } from 'react-redux'
import actions from 'src/store/modules/common/actions'
// import { MenuGroup } from 'src/router/constant'
import 'src/assets/fonts/icon-font.css'

import { bindActionCreators } from 'redux'

const { SubMenu } = Menu

interface IState {
    pathname:string
}
interface ActionProps{
    actions: typeof actions,
    collapsed:boolean,
    authUrls: any[],
}

type IProps = RouteComponentProps<any>&ActionProps

const menuRoutes = routes.filter(item=>{return !item.hide})

class Aside extends React.Component<IProps, IState> {

    state:IState = {
        pathname:'',
    }

    // 点击菜单路由跳转
    handleClick = (menuItem: IMenuInfo, subMenuItem: IMenuInfo | undefined) => {
        const path = subMenuItem ? menuItem.path + subMenuItem.path : menuItem.path
        const { history } = this.props
        history.push({ pathname: path })
    }

    // 获取当前路径匹配的菜单
    getSelectedKey = (pathname: string): string[] => {
        const selectedParentNode = menuRoutes.find((item: IMenuInfo) => {
            let menuNode
            if (item.children) {
                // tslint:disable-next-line: no-unused-expression
                menuNode = (item.children && item.children.filter((subItem: IMenuInfo) => {
                    return item.path + subItem.path === pathname
                })) || []
                return menuNode.length > 0
            } else {
                return item.path === pathname
            }
        }) || menuRoutes[0]
        return [selectedParentNode.path]
    }

    toggleCollapsed = () => {
        this.props.actions.toggleMenuCollapsed()
    }

    unListen:any
    componentDidMount(){
        const { pathname } = this.props.location
        this.updatePathName(pathname)
        this.unListen = this.props.history.listen((listen:any)=>{
            const {pathname} = listen
            this.updatePathName(pathname)
        })
    }

    componentWillUnmount(){
        this.unListen&&this.unListen()
    }

    // 非菜单点击或者导航菜单没有的url 需要页面请求是高亮对应的项需要在本方法做处理
    /**
     * 更新pathname
     * @param pathname  当前变更的pathname
     */
    updatePathName = (pathname:string)=>{
        let pname = pathname
        if(['/intelligentSeat','/help'].includes(pathname)){
            pname = '/dashboard'
        }
        this.setState({
            pathname:pname,
        })
    }

    render() {
        
        const { collapsed, authUrls } = this.props
        const {pathname} = this.state
        const collapsedBtnStyle = { fontSize: '8px', verticalAlign: 'middle' }
        return (
            <div className={styles.aside}>
                <Menu
                    defaultSelectedKeys={[pathname]}
                    selectedKeys={[pathname]}
                    defaultOpenKeys={this.getSelectedKey(pathname)}
                    inlineCollapsed={collapsed}
                    mode="inline"
                    theme="light"
                >
                    {
                        menuRoutes.map((menuItem: IMenuInfo) => {
                            if (menuItem.children && menuItem.children.length > 0) {
                                if(authUrls.length && authUrls.includes(menuItem.path))
                                return (
                                    <SubMenu key={menuItem.path} title={menuItem.meta.title} icon={<span className={`iconfont ${menuItem.icon ||''}`}></span>}>
                                        {menuItem.children && menuItem.children.map((subMenuItem: IMenuInfo) => {
                                            if(!subMenuItem.hide){
                                                if(authUrls.length && authUrls.includes(menuItem.path + subMenuItem.path))
                                                return (
                                                    <Menu.Item
                                                        onClick={() => this.handleClick(menuItem, subMenuItem)}
                                                        key={menuItem.path + subMenuItem.path}
                                                    >
                                                        {subMenuItem.meta.title}
                                                    </Menu.Item>
                                                )
                                            }else{
                                                return null
                                            }
                                        })}
                                    </SubMenu>
                                )
                            } else {
                                if(authUrls.length && authUrls.includes(menuItem.path))
                                return (
                                    <Menu.Item
                                        onClick={() => this.handleClick(menuItem, undefined)}
                                        key={menuItem.path}
                                        icon={<span className={`iconfont ${menuItem.icon || ''}`}></span>}
                                    >
                                        {menuItem.meta.title}
                                    </Menu.Item>
                                )
                            }
                        })
                    }
                </Menu>
                <div className={styles.collaspeBtn} style={{width:collapsed?56:200}} onClick={this.toggleCollapsed}>
                    {collapsed ? <DoubleRightOutlined style={collapsedBtnStyle} /> : <DoubleLeftOutlined style={collapsedBtnStyle} />}
                </div>
            </div>
        )
    }
}

export default connect(
    (state: any) => {
        return {
            menuDisplay: state.commonReducer.menuDisplay,
            collapsed: state.commonReducer.collapsed,
            authUrls: state.login.authUrls,
        }
    },
    dispatch => {
        return {
            actions: bindActionCreators(actions, dispatch),
        }
    }
)(withRouter(Aside))