需求：针对菜单过多，嵌套过深的的项目对路由（菜单）进行平铺展示，无子路由的在前一行进行水平展示，有子路由的在下一行进行展示，并进行跳转（标题独立一行，子路由换行展示）

尝试思路：第一次对这个需求进行评估时觉得难点应该在数据结构的梳理上。分析的时候想着是对数据结构进行处理，把每一层级有子路由的和无子路由的拆成两个对象，但是在实际渲染的过程中发现需要不断地在递归中进行判断＋return。进而无论怎么处理数据结构，递归+判断+return都是必不可免的。所以这个需求实际的问题应该是把判断和return拆分出来。

代码逻辑：递归函数接受两个参数，第一个参数接受的是路由数据（对象），第二个参数用来区分第一次递归，对标题进行样式处理。拆分判断+return采用的是两次循环，对有children和无children的数据进行单独循环，这样就可以循环出所有的数据。

展示效果

代码

     * 
     * @param {路由信息对象} data 
     * @param {区分第一次递归，用来对标题进行样式处理} key 
     * @returns 
     */
    const router = (data, key) => {
        const { children, name } = data
        return <div>
            <div style={{ display: 'flex' }}>
                {key == 1 ?
                    <div style={{ width: '10px', height: '25px', backgroundColor: 'black', marginTop: '8px', marginRight: '10px' }}></div>
                    :
                    <div style={{ width: '5px', height: '15px', backgroundColor: 'red', marginTop: '4px', marginRight: '5px' }}></div>
                }
                <div style={{ fontSize: key == 1 ? '24px' : '14px', color: key !== 1 ? 'red' : "black" }}>{name}</div>
            </div>
            <div style={{ display: 'flex' }}>
                {children.map(value => {
                    if (!value.children) {
                        return <div style={{ padding: '5px' }} onClick={() => { console.log(value.path, '跳转') }>{value.name}</div>
                    }
                })}
            </div>
            <div style={{ paddingLeft: '20px' }}>
                {children.map(value => {
                    return <div>{value.children && router(value)}</div>
                })}
            </div>
        </div>
    }