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 (
            
                
                    

                        
                    
                
            
        );
    }
}

修改Main组件，也是最简单的router4使用：

class Home extends React.Component {
    constructor(props) {
        super(props)
        // 没有super(props), 后面使用回报错
        // 定义state
        // bind方法
        // 其他初始化工作
    }

    componentWillMount() {
        // 服务器渲染的唯一hook
    }

    componentDidMount() {
        // 可以调用setState， render Component
    }

    render() {
        return (
            

                
                    
                    
                    
                
            
        );
    }
}

const Login = () => {
    return(
        
login
    );
}

class Main extends React.Component {
    render() {
        return(
            

                Main
            
        );
    }
}
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(
            

                
                    
header
                    
                        left sidebar
                        main content
                        right sidebar
                    
                    
footer
                
            
        );
    }
}

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
        
    );
}

const MyFooter = () => {
    return (
        

            footer
        
    );
}

const Demo1 = () => {
    return (
        

            demo1
        
    );
}

const Demo2 = () => {
    return (
        

            demo2
        
    );
}

const Demo3 = () => {
    return (
        

            demo3
        
    );
}

const RightContent = () => {
    return (
        

            
                
                    
                    
                    
                    
                
            
        
    );
}

const LeftSider = () => {
    return (
        
            
                
                    
                    option1
                
                
                    
                    option2
                
                
                    
                    option3
                
            
        

    );
}

class Main extends React.Component {
    render() {
        return (
            

                
                    
                    
                        
                        
                    
                    
                
            
        );
    }
}


export default Main;

打开浏览器可以看到如下页面：

image.png

点击不同的菜单，右边内容做相应的变化。
不过，对于后退操作和刷新页面操作无效，左边菜单无法保持选中项高亮。
解决办法如下：
menu用seletedkeys来决定哪项被选中。需要判断当前选前的路由是什么，可以借助withrouter。修改如下：
withrouter的使用请查看官网

const LeftSider = withRouter(({history}) => {
    return (
        
            
                
                    
                    option1
                
                
                    
                    option2
                
                
                    
                    option3
                
            
        

    );
} )