react实战--antd、react-router-dom v4 解决菜单和地址同步问题

antd、react-router-dom v4 解决菜单和地址同步问题

最近使用react开发项目，使用react-router-dom v4，并结合antd\redux。
遇到问题：模块热加载或者浏览器强制刷新后，页面更新后菜单栏的激活列和地址和展示内容往往不同步。
使用antd的Menu组件和react-router-dom结合，解决该问题，故分享下希望对小伙们有所帮助。

到发文时使用的版本是：
- react (v15.5.4)
- react-router-dom (v4.2.2)
- antd (v2.9.3)
- redux (v3.6.0)

---

项目功能(部分)：

页面 路径 页面登录 / 主页面（包含侧边栏菜单–antd Menu） /home 用户列表 /home/users 角色列表 /home/roles

---

页面入口，routers.jsx

import React from 'react';import ReactDOM from 'react-dom';import { BrowserRouter, Route, Redirect, Switch } from 'react-router-dom'import { createStore } from 'redux';import { Provider } from 'react-redux';import Reducer from './reducers';import LoginContainer from './container/loginContainer';import Home from './components/home/home';import './fontIcon/index.css';const Store = createStore(Reducer)const Root = () => (    <BrowserRouter>        <Provider store={Store}>            <div>                <Switch>                    <Route exact path="/" component={LoginContainer}/>                    <Route path="/home" component={Home}/>                    <Redirect to="/"/>                </Switch>            </div>        </Provider>    </BrowserRouter>);const dom = document.getElementById('root');ReactDOM.render(<Root />, dom);

BrowserRouter：基于浏览器H5 history API的一种Router，推荐使用这种方式。

Route : 是路由中最最基础和最最重要的，其path为要匹配地址栏的路径（可以是绝对匹配，也可以是匹配一部分获取一部分，项目结构简单，暂用绝对匹配），component为匹配成功后要加载的模块（同方式还有其他两种，component为最常用，另外两种暂不介绍了）
Route exact 使用该模式后，地址是绝对匹配，比如/home 如果不设置exact，当地址为/home/group时也会匹配，但使用之后，则不会。

Redirect ：重定向路由，主要用于匹配无效地址到指定路径。例如上例中，如果输入”http://XXXXX:000/baidu” 会被重定向到http://XXXXX:000/，加载登录模块。

Switch ： 这个是v4新增加的，是为了保证路由匹配的唯一性，从上往下，一旦匹配上，就不再往后匹配了。例如上面代码中包裹的Route，如果不加switch，当地址栏输入http://XXXXX:000/时，第一条route会匹配，加载登录模块，第三条路由也会匹配，重定向到/，会导致打开的路径重复打开，此时控制台会提示重复执行路径。

---

页面入口，routers.jsx

import React from 'react'import { Layout, Menu, Icon } from 'antd'import {  Route, Switch, Redirect, NavLink } from 'react-router-dom'import UserListContainer from '../../container/userListContainer';import RoleListContainer from '../../container/roleListContainer';import Logout from '../logout'const { Content, Sider} = Layout;import './home.less';const Home = (props) => {    return (        <Layout className="sider_layout" style={{ minHeight: '100vh'}}>            <Sider collapsed={false} >                <div className="logo header_title">                    项目管理                </div>                <Menu theme="dark" selectedKeys={[location.pathname]} mode="inline" >                    <Menu.Item key="/home/users">                        <NavLink to="/home/users"><Icon type="team" />用户列表</NavLink>                    </Menu.Item >                    <Menu.Item key="/home/roles">                        <NavLink to="/home/roles"><Icon type="solution" />角色列表</NavLink>                    </Menu.Item >                    <Menu.Item>                        <Logout history={props.history}/>                    </Menu.Item >                </Menu>            </Sider>            <Layout>                <Content className="us_content">                    <Switch>                        <Route path="/home/users" component={UserListContainer} />                        <Route path="/home/roles" component={RoleListContainer} />                    </Switch>                </Content>            </Layout>        </Layout>    )}export default Home

Menu：antd提供的便捷组件，类似bootstrap。其中子菜单是用户列表和角色列表，其selectedKeys属性为选中哪个子菜单，该值对应Menu.Item的key。
在该项目中，我将key和路径设置为一样的值，方便直接从location路径中直接取值后修改选中状态。

NavLink：和Link一样，文档说NavLink可以自定义激活状态和类名，这里使用NavLink和Link都可，暂没有区别。

---

注：selectedKeys是和地址栏对应的，也就是解决本文问题的关键，当该值和地址栏同步后，无论页面强制刷新还是热加载，菜单栏选中的菜单和显示的内容和地址都是同步的。

location：该值要想获取到，需要使用react-router-dom的withRouter。使用withRouter处理XXXContainer之后，可以在XXXContainer连接的组件中调用location对象，获取需要的值。

使用示例：

const RoleListContainer = connect(    mapStateToProps,    mapDispatchToProps)(rolesList);//withRouter 不需要引入export default withRouter(RoleListContainer)

---

总结
react-router-dom v4 不再像之前的v3一样，需要将所有的路由写在一起，而是将各个模块作为dom一样直接嵌套使用，Route匹配后加载的组件还可以包含多个Route，这样的使用使加载组件更为便捷，结构更加清晰。

不足之处还望小伙伴们多多提出，多多指教~