react-router v4注意事项

关于react-router的大部分资料可以从官方文档中获取

https://reacttraining.cn/web/guides/quick-start
这里写几点自己从v3 升级到v4时候出现的问题

1.代码拆分:

官方上给的事例是自己实现一个bundle类，使用
bundle-loader?lazy!./Something 和webpack实现代码拆分，这种方式在写的时候略有麻烦，可以自己更改bundle类实现更简单的。这里提供一个方法：
使用import LazyRoute from 'lazy-route'

  path: '/customer/detail/',
  breadcrumbName: '客户管理/详情',
  exact: true,
  render: (props) => 

这样一个配置，就可以达到代码拆分的效果且写起来比较美观

2.权限检测：

权限检测目前在项目中没有找到一个好的方式去实现异步检测，目前是将权限获取到本地进行同步检测，在v4中和v3的方式完全不同。v3 中路由有钩子，而在v4中取消了该方法，总体我们可以自己封装router类来实现：

const PrivateRoute = ({component: Component, ...rest}) => (
   {
    return (
      api.isLogin() ?
        auth(props.match.path) ? (
          
        ) : (
          
        ) : (
        
      )
    )
  }}/>
);

export default PrivateRoute;

3.router 配置文件

v4中推荐配置文件配置路由，先将路由写在一个配置文件中，在需要展示的地方map出来

const routers = [{
  path: '/',
  breadcrumbName: "首页/",
  exact: true,
  render: () => api.isLogin() ?  : ,
}, {
  path: '/home',
  exact: true,
  breadcrumbName: "首页/",
  render: () => api.isHeadquarters() ?  : ,
}, {
  path: '/customer/detail/',
  breadcrumbName: '客户管理/详情',
  exact: true,
  render: (props) => 
}, {
  path: '/customer/detail/:customerId',
  breadcrumbName: '客户管理/详情',
  exact: true,
  render: (props) => 
}]



routes.map((route, index) => (
                      

配置文件可以写多个组件，在一个页面我们可以显示一个路由中的不同组件，比如sideBar breadcrumbName等等。

配置文件不能写空路由，即没有定义组件的路由，这样在渲染的时候因为匹配到了路由而不能渲染undefined组件报错。

更多的信息可以见文档。官方文档写的比较简洁，从v3版本升级会遇到坑。