antd的sider與router4結合, 後退刷新，菜單高亮

在前面的文章中，簡單介紹了react + less + axios + mobx的使用，UI庫能夠選擇antd或者material UI。 目前使用的antd。其中在最簡單的佈局中，使用sider遇到了問題。在頁面的強制刷新或者後退，左邊menu的高亮和頁面元素並不會發生變化。下面簡單記錄使用react-router4和antd搭配，完美的解決這個問題，後續還有一個全局的登陸問題能夠考慮。

基本的router4 使用

yarn add react-router-dom: 安裝須要用到的路由模塊。 修改 App組件： 後面能夠藉助withrouter在組件內訪問路由，後面有例子。

class App extends Component {
    render() {
        return (
            <Provider {...stores}>
                <BrowserRouter>
                    <div className="App">
                        <Home/>
                    </div>
                </BrowserRouter>
            </Provider>
        );
    }
}
複製代碼

修改Main組件，也是最簡單的router4使用：

class Home extends React.Component {
    constructor(props) {
        super(props)
        // 沒有super(props), 後面使用回報錯
        // 定義state
        // bind方法
        // 其餘初始化工做
    }

    componentWillMount() {
        // 服務器渲染的惟一hook
    }

    componentDidMount() {
        // 能夠調用setState， render Component
    }

    render() {
        return (
            <div className="Home">
                <Switch>
                    <Route path={"/login"} component={Login}/>
                    <Route path={"/"} component={Main}/>
                    <Redirect to={"/"}/>
                </Switch>
            </div>
        );
    }
}

const Login = () => {
    return(
        <div>login</div>
    );
}

class Main extends React.Component {
    render() {
        return(
            <div>
                Main
            </div>
        );
    }
}
export default Home
複製代碼

具體細節不作解釋，能夠與我溝通或者上網查閱資料。 yarn start 打開瀏覽器，分別輸入不一樣的地址，能夠匹配到不一樣的組件。

基本的antd佈局

Login組件不作改動。下面修改Main。

import React from "react";
import {Layout, Menu} from 'antd'
const { Header, Content, Sider, Footer } = Layout;

class Main extends React.Component {
    render() {
        return(
            <div>
                <Layout>
                    <Header>header</Header>
                    <Layout>
                        <Sider>left sidebar</Sider>
                        <Content>main content</Content>
                        <Sider>right sidebar</Sider>
                    </Layout>
                    <Footer>footer</Footer>
                </Layout>
            </div>
        );
    }
}

export  default Main;
複製代碼

基本佈局，上中下，具體能夠參考antd官網。下面分別修改sider組件，content組件。

代碼以下：

import React from "react";
import {Layout, Menu} from 'antd'
import {Link, Route, Switch, Redirect} from "react-router-dom"
import './index.less'

const {Header, Content, Sider, Footer} = Layout;

const MyHeader = () => {
    return (
        <Header className='main-header'>
            header
        </Header>
    );
}

const MyFooter = () => {
    return (
        <Footer className='main-footer'>
            footer
        </Footer>
    );
}

const Demo1 = () => {
    return (
        <div>
            demo1
        </div>
    );
}

const Demo2 = () => {
    return (
        <div>
            demo2
        </div>
    );
}

const Demo3 = () => {
    return (
        <div>
            demo3
        </div>
    );
}

const RightContent = () => {
    return (
        <div>
            <Content>
                <Switch>
                    <Route path="/1" component={Demo1}/>
                    <Route path="/2" component={Demo2}/>
                    <Route path="/3" component={Demo3}/>
                    <Redirect to="/1"/>
                </Switch>
            </Content>
        </div>
    );
}

const LeftSider = () => {
    return (
        <Sider>
            <Menu
                mode="inline"
                defaultSelectedKeys={['/1']}
            >
                <Menu.Item key="/1">
                    <Link to="/1"/>
                    option1
                </Menu.Item>
                <Menu.Item key="/2">
                    <Link to="/2"/>
                    option2
                </Menu.Item>
                <Menu.Item key="/3">
                    <Link to="/3"/>
                    option3
                </Menu.Item>
            </Menu>
        </Sider>

    );
}

class Main extends React.Component {
    render() {
        return (
            <div className="Main">
                <Layout className='main-layout'>
                    <MyHeader/>
                    <Layout>
                        <LeftSider/>
                        <RightContent/>
                    </Layout>
                    <MyFooter/>
                </Layout>
            </div>
        );
    }
}


export default Main;
複製代碼

打開瀏覽器能夠看到以下頁面：

點擊不一樣的菜單，右邊內容作相應的變化。 不過，對於後退操做和刷新頁面操做無效，左邊菜單沒法保持選中項高亮。 解決辦法以下： menu用seletedkeys來決定哪項被選中。須要判斷當前選前的路由是什麼，能夠藉助withrouter。修改以下： withrouter的使用請查看官網

const LeftSider = withRouter(({history}) => {
    return (
        <Sider>
            <Menu
                mode="inline"
                defaultSelectedKeys={['/1']}
                selectedKeys={[history.location.pathname]}
            >
                <Menu.Item key="/1">
                    <Link to="/1"/>
                    option1
                </Menu.Item>
                <Menu.Item key="/2">
                    <Link to="/2"/>
                    option2
                </Menu.Item>
                <Menu.Item key="/3">
                    <Link to="/3"/>
                    option3
                </Menu.Item>
            </Menu>
        </Sider>

    );
} )
複製代碼