React路由

1、参考文档 React路由详解：

2、嵌套路由思想

将路由封装成组件，逻辑如下

• 需要登录
  • 已经登录
    • 有权限
      • 有子路由----> 递归
      • 没有子路由---->直接Route
    • 没有权限----> Route到无权限页面
  • 没有登录----> Redirect到登录页
• 不需要登录---->直接 Route 渲染

以下是路由组件的参考：

class PrivateRoute extends React.Component {
  util = (routerList) => {
    return routerList.map((route, i) => {
      if (route.meta && route.meta.require) { //需要登录
        //  登录的同时还要 判断我现在的身份和路由权限是否匹配
        if (this.props.day4.user.isLogin) {
          // 用户已经登录
          // 获取登录者的权限 和 页面权限进行比较
          const premissicons = this.props.day4.user.premissicons/* 登录者的权限 */
          const roles = route.role  /* 页面的权限 */
          if (roles.includes(premissicons)) {
            // 随便进入 
            if (route.children) {
              return <Route key={route.name} path={route.path} render={() =>
                <route.component {...this.props}>
                  {this.util(route.children)}
                  <Route key={route.name} path={route.path} render={() => <Redirect to={route.redirect} />} />
                </route.component>
              }>
              </Route>
            } else {
              return <Route key={route.name} exact path={route.path} component={route.component} />
            }
          } else {
            return (<Route key={route.name} path={route.path} component={Quanxian}></Route>)
          }
        } else {
          // 用户没有登录但是想进需要登录页面
          return <Redirect key={route.name} to='/Login'></Redirect>
        }

      } else if (route.redirect) {
        return (<Route key={route.name} path={route.path} exact render={() => <Redirect to={route.redirect} />} />)
      } else {
        return (<Route key={route.name} path={route.path} component={route.component} />)
      }
    })
  }
  render() {
    let { routerList } = this.props
    return (
      <HashRouter>
        <Switch>

          {this.util(routerList)}
        </Switch>
      </HashRouter>
    )
  }
}

以下是路由路径编写示例：

export default [  {    path: '/',    name: '登录1',    redirect: '/login',    meta: {      require: false    }  },  {    path: '/login',    name: '登录',    component: Login,    meta: {      require: false    }  },  {    path: '/Main',    name: '系统主入口',    component: IndexPage,    redirect: '/Main/Home',    meta: { require: true },    role: ['admin', 'user1', 'user2'],
    children: [
      {
        path: '/Main/Home',
        name: '首页',
        component: Home,
        meta: { require: true },
        role: ['admin', 'user1', 'user2']
      },
      {
        path: '/Main/About',
        name: '关于我们',
        component: About,
        meta: { require: true },
        role: ['admin', 'user1', 'user2'],
        redirect: '/Main/About/Company',
        children: [
          {
            path: '/Main/About/Company',
            name: '公司简介',
            component: Company,
            meta: { require: true },
            role: ['admin', 'user1', 'user2'],
          },
          {
            path: '/Main/About/History',
            name: '公司历史',
            component: History,
            meta: { require: true },
            role: ['admin', 'user1'],
          },
          {
            path: '/Main/About/Services',
            name: '公司服务',
            component: Services,
            meta: { require: true },
            role: ['admin', 'user1', 'user2'],
          },
          {
            path: '/Main/About/Location',
            name: '公司地址',
            component: Location,
            meta: { require: true },
            role: ['admin', 'user2'],
          },
        ]
      },
      {
        path: '/Main/Events',
        name: '企业事件',
        component: Events,
        meta: { require: true },
        role: ['admin', 'user1', 'user2']
      },
      {
        path: '/Main/Products',
        name: '公司产品',
        component: Products,
        meta: { require: true },
        role: ['admin', 'user2']
      },
      {
        path: '/Main/Contact',
        name: '联系我们',
        component: Contact,
        meta: { require: true },
        role: ['admin', 'user1']
      },
      {
        path: '/Main/Xiaoshijian',
        name: '小事',
        component: Xiaoshi,
        meta: { require: true },
        role: ['admin', 'user1']
      },
      {
        path: '/Main/Huaishi',
        name: '坏事',
        component: Huaishi,
        meta: { require: true },
        role: ['admin', 'user2']
      },
      {
        path: '/Main/Haoshi',
        name: '好事',
        component: Haoshi,
        meta: { require: true },
        role: ['admin', 'user1']
      },
    ]
  },
]

在APP.js中引入如下：