在前面的文章中，简单介绍了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 ); }}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 ( );}const Demo1 = () => { return ( demo1 );}const Demo2 = () => { return ( demo2 );}const Demo3 = () => { return ( demo3 );}const RightContent = () => { return ( );}const LeftSider = () => { return ( );}class Main extends React.Component { render() { return ( ); }}export default Main;复制代码 打开浏览器可以看到如下页面：
withrouter的使用请查看官网 const LeftSider = withRouter(({ history}) => { return ( );} )复制代码