菜單&路由

一、初次上手

最開始在 demo 中寫路由的時(shí)候，是這樣的：

// container/index.js
class App extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        return (
            <HashRouter basename="/" >
                <div id="nav">
                    <Sider />
                    <div id="rightWrap">
                        <Menu mode="horizontal">
                            <SubMenu title={<span><Icon type="user" />{this.state.username}</span>}>
                                <Menu.Item key="setting:1">退出</Menu.Item>
                            </SubMenu>
                        </Menu>
                        <div className="right-box">
                            <Switch>
                                <Route path="/" exact render={() => <h1>Home Page</h1>} />
                                <Route path="/page1" exact component={UserList}></Route>
                                <Route path="/page2" exact component={PostList}></Route>
                                <Route path="/page3" exact render={() => <h1>路由測(cè)試</h1>}></Route>
                                <Route path="/page4" exact render={() => <h1>路由測(cè)試</h1>}></Route>
                                <Redirect to="/" />
                            </Switch>
                        </div>
                    </div>
                </div>
            </HashRouter>
        );
    }
}

// sider/index.jsx
class Sider extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        return (
            <div id="leftMenu">
                <span className="logo" style={{marginLeft: '40px'}}>主菜單</span>
                <Menu theme="dark"
                    style={{ width: 200 }}
                    defaultOpenKeys={['sub1', 'sub2']}
                    defaultSelectedKeys={[this.state.current]}
                    mode="inline"
                >
                    <SubMenu key="sub1" title={<span><Icon type="bars" /><span>子菜單</span></span>}>
                        <Menu.Item key="1"><Link to="/page1">用redux-thunk獲取數(shù)據(jù)</Link></Menu.Item>
                        <Menu.Item key="2"><Link to="/page2">用redux-saga獲取數(shù)據(jù)</Link></Menu.Item>
                        <Menu.Item key="3"><Link to="/users">測(cè)試路由</Link></Menu.Item>
                        <Menu.Item key="4"><Link to="/page4" >測(cè)試路由</Link></Menu.Item>
                    </SubMenu>
                </Menu>
            </div>
        );
    }
}

可以看到，路由散布在兩個(gè)文件中，意味著每次更改路由的時(shí)候，都需要更改兩個(gè)地方，而且還得去找這兩個(gè)文件在哪，可能有時(shí)候修改了一個(gè)地方，然后運(yùn)行之后點(diǎn)擊的時(shí)候報(bào)錯(cuò)了，再去修改另一個(gè)地方，這樣是很浪費(fèi)時(shí)間的。

因此，如果能把路由的配置抽出來(lái)進(jìn)行集中式的路由管理，每次修改只需在那一個(gè)地方對(duì)路由進(jìn)行修改，是很值得考慮的。

二、集中管理路由

通過(guò)路由配置來(lái)生成路由的方式是參考了 Material-UI Theme 模板中的寫法。 盡管在使用這個(gè) UI 框架時(shí)，讓我很抓狂，但是有些地方還是值得學(xué)習(xí)的。┐(￣ヮ￣)┌

目錄結(jié)構(gòu)

（1）路由 config

const dashRoutes = [
    {
        path: '/home',
        name: '主菜單',
        component: () => <h1>Home Page</h1>
    },
    {
        collapse: true,
        name: 'Nav One',
        key: 'sub1',
        icon: <Icon type="mail" />,
        children: [
            {
                path: '/userList',
                name: '用戶列表',
                key: 1,
                icon: '',
                component: UserList
            }, 
            {
                path: '/postList',
                name: '帖子列表',
                key: 2,
                icon: '',
                component: PostList
            },
            {
                path: '/option3',
                name: 'Option3',
                key: 3,
                icon: '',
                component: () => <h1>Option3</h1>
            },
            {
                collapse: true,
                name: 'Submenu',
                key: 'submenu',
                icon: '',
                children: [
                    {
                        path: '/option4',
                        name: 'Option4',
                        key: 4,
                        icon: '',
                        component: () => <h1>Option4</h1>
                    },
                    {
                        path: '/option5',
                        name: 'Option5',
                        key: 5,
                        icon: '',
                        component: () => <h1>Option5</h1>
                    }
                ]
            }
        ]
    },
    {
        collapse: true,
        name: 'Nav Two',
        key: 'sub2',
        icon: <Icon type="appstore" />,
        children: [
            {
                path: '/Option6',
                name: 'Option6',
                key: 6,
                icon: '',
                component: () => <h1>Option6</h1>
            },
        ]
    },
    { redirect: true, path: '/', to: '/home', name: '' }
];

（2）根據(jù) config 生成路由

const switchRoutes = (
    <Switch>
        {dashRoutes.map((prop, key) => {
            if (prop.redirect) {
                return <Redirect from={prop.path} to={prop.to} key={key} />;
            }

            if (prop.collapse) {
                return prop.children.map((prop, key) => {
                    if (prop.collapse) {
                        return prop.children.map((prop, key) => {
                            return <Route path={prop.path} component={prop.component} key={key} />;
                        })
                    }
    
                    return <Route path={prop.path} component={prop.component} key={key} />;
                });
            }
            
            return <Route path={prop.path} component={prop.component} key={key} />; 
        })}
    </Switch>
);

（3）生成左側(cè)菜單

<Menu theme="dark"
    style={{ width: 200 }}
    defaultOpenKeys={['sub1', 'sub2']}
    defaultSelectedKeys={[this.state.current]}
    mode="inline"
>
    {routes.map((prop, index) => {
        if (prop.redirect) return;
        if (prop.collapse) {
            return (
                <SubMenu key={prop.key} title={<span>{prop.icon}<span>{prop.name}</span></span>}>
                    {prop.children.map((prop, index) => {
                        if (prop.children) {
                            return (
                                <SubMenu key={prop.key} title={<span>{prop.name}</span>}>
                                    {prop.children.map((prop, index) => {
                                        return <Menu.Item key={prop.key}><Link to={prop.path}>{prop.name}</Link></Menu.Item>;
                                    })}
                                </SubMenu>
                            )
                        }
                        return <Menu.Item key={prop.key}><Link to={prop.path}>{prop.name}</Link></Menu.Item>;
                    })}
                </SubMenu>
            )
        }
    })}
</Menu>

現(xiàn)在只需要在路由配置文件中進(jìn)行統(tǒng)一的路由修改，模塊引入，修改 icon 就可以了。

ps：每個(gè)項(xiàng)目的左側(cè)菜單不一樣，需要根據(jù)實(shí)際情況調(diào)整代碼，本文只是利用 antd 的 Menu 組件舉個(gè)示例。

?? DEMO（check branch：webpack4+router4）