关于react.js:reactrouterdom-v6更新对antd动态生成menu菜单的影响

案例背景

react-router-dom 更新到v6着实是一次大改，很多之前重要的组件和个性都改掉了，最显著的就是替换了Switch，Route里的Component属性等等。当然，对此次发现的问题的首恶是，更新删除了路由组件(class)默认自带的三个属性–match, history, location。不仅让编程式路由导航的罕用写法生效了，antd动静生成menu的view也受到了影响。同时react-router-dom在鼎力推广函数式组件的应用，所以能够通过一些hook来获取match，history和location，但类式组件就没那么侥幸啦，本文次要针对router的更新对类式组件的影响探讨。

原因是之前Menu中的selectedKeys属性须要通过this.props.location.pathname，从以后路由组件获取当初的path，router更新后当然就只能另求他法了。

这里先要阐明一下为什么不将Menu中的defaultSelectedKeys设置为’/home’：如果用户是从’/’被重定向到’/home’，此时会呈现问题，因为页面会渲染两次导致第二次无奈应用default。

老版本的动静生成menu的办法如下：

export default class LeftNav extends Component {
    state = {
        collapsed: false,
    };

    onCollapse = collapsed => {
        this.setState({ collapsed });
    };

    createMenuNodes = (menuList) => {
        return menuList.map(item => {
            return item.children ?
            (
                <SubMenu key={item.key} icon={item.icon} title={item.title}>
                    {this.createMenuNodes(item.children)}
                </SubMenu>
            ) :
            (
                <Menu.Item key={item.key} icon={item.icon}>
                    <Link to={item.key}>{item.title}</Link>
                </Menu.Item>
            )
        })
    }   

    render() {
        const { collapsed } = this.state
        const path = this.props.location.pathname
        return (
            <Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
                <div className="logo" style={collapsed === true ? { opacity: 0 } : { opacity: 1, transition: 'all 0.7s' }}>商品后盾管理系统</div>
                <Menu theme="dark" selectedKeys={[path]} mode="inline">
                    {
                        this.createMenuNodes(menuList)
                    }
                </Menu>
            </Sider>
        )
    }
}

解决方案

最后想到的办法应用浏览器自带的window.location.pathname获取，然而点击导航时却并没有触发高亮变动，起因应该是react的diffing算法并不能监测到URL的变动，所以没有触发render。目前我只想到一个不太聪慧的办法，通过更新state获取path，但会多出很多条代码来解决门路异样时，state更新到home的问题，所以还要先判断以后path是不是无效的path。很轻便，集体愚见，如果有大佬能想到更好的优化办法请多指教。（最好的优化就是不必class组件～）

export default class LeftNav extends Component {
    state = {
        collapsed: false,
        path: ''
    };

    onCollapse = collapsed => {
        this.setState({ collapsed });
    };

    componentDidMount(){
        const curPath = window.location.pathname
        const effectivePaths = this.findEffectivePaths(menuList).flat() //扁平化数组
        if (effectivePaths.indexOf(curPath) === -1) {
            this.setState({path: '/home'}) //如果不是无效path，就指向home
        } else {
            this.setState({path: curPath})
        }
    }

    //统计无效的path
    findEffectivePaths = (menuList) => {
        return menuList.map(item => {
            if (item.children) {
                return this.findEffectivePaths(item.children)
            } else {
                return item.key
            }
        })
    }

    //动静生成Menu，map+递归 （也能够通过reduce+递归）
    createMenuNodes = (menuList) => {
        return menuList.map(item => {
            return item.children ?
            (
                <SubMenu key={item.key} icon={item.icon} title={item.title}>
                    {this.createMenuNodes(item.children)}
                </SubMenu>
            ) :
            (
                <Menu.Item key={item.key} icon={item.icon}>
                    <Link to={item.key} onClick={() => {this.setState({path: item.key})}}>{item.title}</Link>
                </Menu.Item>
            )
        })
    }   

    render() {
        const { collapsed, path } = this.state
        return (
            <Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
                <div className="logo" style={collapsed === true ? { opacity: 0 } : { opacity: 1, transition: 'all 0.7s' }}>商品后盾管理系统</div>
                <Menu theme="dark" selectedKeys={[path]} mode="inline">
                    {
                        this.createMenuNodes(menuList)
                    }
                </Menu>
            </Sider>
        )
    }
}