react03

react脚手架：

　　全局安装：npm i create-react-app -g

　　查看脚手架版本：create-react-app -V

脚手架创建项目：

　　create-react-app myrouter（要求node版本最低是v10.14.2）

react路由：

　　安装：npm i react-router-dom

　　基本使用：

　　　　1、路由的形式：

　　　　　　hash路由：HashRouter

　　　　　　history路由：BrowserRouter

　　　　　　路由的所有配置必须在HashRouter或BrowserRouter的包裹范围之内

　　　　2、路由的显示：

　　　　　　route：

　　　　　　　　作用：用来配置路由以及路由的显示

　　　　　　　　配置项：

　　　　　　　　　　path：路由匹配的路径

　　　　　　　　　　component：当路径匹配成功后需要渲染的组件（值为组件名称）

　　　　　　　　　　render：当路径匹配成功后需要渲染的组件（值是一个函数）

　　　　　　　　　　exact：完全匹配

　　　　3、路由跳转的方式：

　　　　　　①a标签

          <a href="#/home">首页</a>
          <a href="#/classify">分类</a>
          <a href="#/order">订单</a>

　　　　　　②Link（没有选中标识的，使用场景：返回）

          <Link to='/home'>首页</Link>
          <Link to='/order'>订单</Link>
          <Link to='/classify'>分类</Link>

　　　　　　　　如果重复点击某个路由会报警告：

　　　　　　　　　　

　　　　　　　　　　警告:哈希历史不能推送相同的路径;新的条目不会被添加到历史堆栈中

　　　　　　③NavLink（使用场景：底部导航、有选中标识的导航）

　　　　　　　　

          <NavLink to='/home' activeClassName='aaa' activeStyle={{background:'yellow'}}>首页</NavLink>
          <NavLink to='/order'>订单</NavLink>
          <NavLink to='/classify'>分类</NavLink>

　　　　　　　　

　　　　　　　　配置项：

　　　　　　　　　　to：需要跳转的路径

　　　　　　　　　　activeClassName：更改选中后的标识

　　　　　　　　　　activeStyle：选中后的样式

　　　　　　④编程式导航

　　　　4、路由传值：

　　　　　　①动态路由：（地址栏上有参数：details/xxx/xxx，刷新不丢失）

　　　　　　　　在定义的时候通过 /:属性 的方式来定义传递的属性

　　　　　　　　　　

　　　　　　　　在路由跳转的时候通过 /值 的方式进行传值

　　　　　　　　　　

　　　　　　　　在需要接收数据的页面通过 this.props.match.params 来接收

　　　　　　　　　　

　　　　　　②query传值：（地址栏上有参数：details?id=xxx&name=xxx，刷新不丢失）

　　　　　　　　路由：

　　　　　　　　在路由跳转的时候通过 query 进行传值

　　　　　　　　　　

　　　　　　　　在需要接收数据的页面通过 this.props.location.search 来接收（?id=0&name=%E9%A6%99%E8%95%89）

　　　　　　　　　　

　　　　　　③内存传值：（地址栏上没有参数，刷新会丢失）

　　　　　　　　路由：

　　　　　　　　在路由跳转的时候通过 to={{pathname:'', query:{}}} 进行传值

　　　　　　　　　　

　　　　　　　　在需要接收的页面通过 this.props.location.query 来接收

　　　　　　　　　　

　　　　5、路由嵌套：

　　　　　　

　　　　6、编程式导航：

　　　　　　this.props.history.push()

　　　　　　　　

　　　　　　　　

　　　　　　this.props.history.goBack()
　　　　　　this.props.history.goForward()
　　　　　　this.props.history.go()
　　　　　　this.props.history.replace()

　　　　7、component渲染和render渲染的区别：

　　　　　　①在route组件中通过component属性进行页面渲染的时候会默认的给当前组件传递三个值（history match location）

　　　　　　　　

　　　　　　②render渲染的时候可以渲染组件也可以渲染标签

　　　　　　　　

　　　　　　③render渲染的时候可以进行传值

　　　　　　　　

　　　　　　④一般情况下会通过render的方式进行路由的嵌套

　　　　　　⑤render可以进行更多的业务逻辑

　　　　8、路由重定向：

　　　　　　import {Redirect} from 'react-router-dom'

　　　　　　

　　　　9、Switch

　　　　　　作用：只匹配一个路由

　　　　10、路由懒加载：

　　　　　　①安装：npm i react-loadable

　　　　　　②引入并使用：

　　　　　　　　

　　　　11、withRouter：

　　　　　　高阶组件：

　　　　　　　　作用：可以给当前组件的props传入一个对象，这个对象就是路由的三个值{history match location}

　　　　　　当使用render方式渲染组件时，如果没有手动去传路由的三个值：

　　　　　　　　

　　　　　　此时在order组件中的this.props是一个空对象：

　　　　　　　　

　　　　　　使用withRouter将组件包裹：

　　　　　　　　

 　　　　　　此时再打印this：

　　　　　　　　

　　　　　　说明withRouter给当前被包裹的组件传递了路由的三个值，就可以正常使用编程式导航等功能了。

路由表封装：

　　1、在components中新建index.js文件，将所有的页面都用懒加载的方式引入，整体导出出去

　　2、src下新建router/index.js：将路由放入路由表中

        import {
          Home,
          Classify,
          HotMovie,
          CommingMovie,
          ClassifyOrder,
          Order,
          Login
        } from '../components'

        // 有layout布局的路由表
        export const layoutRoutes = [
          {
            path: '/home',
            component: Home,
            icon: '',
            meta: {}
          },
          {
            path: '/classify',
            component: Classify,
            icon: '',
            meta: {},
            children: [
              {
                path: '/classify/hotMovie',
                component: HotMovie,
                meta: {}
              },
              {
                path: '/classify/commingMovie',
                component: CommingMovie,
                meta: {}
              },
              {
                path: '/classify/order',
                component: ClassifyOrder,
                meta: {}
              }
            ]
          },
          {
            path: '/order',
            component: Order,
            icon: '',
            meta: {}
          }
        ]

        // 没有layout布局的路由表
        export const notLayoutRoutes = [
          {
            path: '/login',
            component: Login,
            meta: {}
          }
        ]

        // 所有路由的配置项
        export const configRoutes = layoutRoutes.concat(notLayoutRoutes)

　　3、src下新建utils/routesEach.js：传入路由表返回对应的组件，并且模拟vue中路由守卫

        import React, { Fragment } from 'react'
        import { Switch, Redirect, Route } from 'react-router-dom'

        export default (routes) => {
          function routesEach(routeConfig) {
            return routeConfig.map((item) => {
              if (item.children) {
                return (
                  <Route
                    path={item.path}
                    key={item.path}
                    render={() => {
                      return (
                        <Fragment>
                          <Route component={item.component}></Route>
                          <Switch>
                            <Redirect
                              from={item.path}
                              to={item.children[0].path} // 重定向到第一个路由
                              exact
                            ></Redirect>
                            {item.children.map((child) => {
                              return (
                                <Route
                                  path={child.path}
                                  key={item.path}
                                  render={() => {
                                    return isAuthRequired(child) // 权限验证
                                  }}
                                ></Route>
                              )
                            })}
                          </Switch>
                        </Fragment>
                      )
                    }}
                  ></Route>
                )
              } else {
                return (
                  <Route
                    path={item.path}
                    key={item.path}
                    render={() => {
                      return isAuthRequired(item)
                    }}
                  ></Route>
                )
              }
            })
          }
          // 权限验证：路由守卫
          function isAuthRequired(item) {
            // 先判断当前路由是否需要权限验证
            if (item.meta.authRequired) {
              // 当前路由需要权限验证，判断token是否存在
              if (localStorage.getItem('token')) {
                return <item.component></item.component>
              } else {
                return <Redirect to="/login"></Redirect>
              }
            } else {
              return <item.component></item.component> // 不需要权限验证的路由可以直接返回
            }
          }
          return routesEach(routes)
        }

　　4、app.js