在前面的文章中，简单介绍了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;
打开浏览器可以看到如下页面：
image.png
点击不同的菜单，右边内容做相应的变化。
不过，对于后退操作和刷新页面操作无效，左边菜单无法保持选中项高亮。
解决办法如下：
menu用seletedkeys来决定哪项被选中。需要判断当前选前的路由是什么，可以借助withrouter。修改如下：
withrouter的使用请查看官网
const LeftSider = withRouter(({history}) => {
return (
);
} )