React路由

react-router React路由，让父组件动态去挂载不同的子组件，本文以4.x为例；
4.x 对依赖包的划分：

• react-router 路由基础库
• react-router-dom 适用于浏览器环境的再次封装
• react-router-native 适用于原生开发环境的再次封装
• react-router-config 静态路由配置助手

v4与v5用法差不多，但与v2/v3差异较大，v4/v5采用的是动态路由，而v2/v3采用的是静态路由。
v5 新增了一些新特性，向后兼容：

• 消除了严格模式的警告
• 对react v16有了更好的支持
• 升级了react context api
• 预优化build，无需考虑生产环境和开发环境

react-router 主张 一切皆组件，不像vue-router那样做中心化配置（集中式路由）。当然，react也支持集中式路由。

• 前端路由的实现：history库，管理浏览器会话历史的工具库。本质上还是包装了原生BOM中的 window.history 和 window.location.hash
• 核心组件：、、、、、、
  • Hash模式：
  • HTML5:history模式：
  • react native开发使用的是 MemoryHistory
• 对象：history、match、withRouter

引入路由之后，可以把组件分为两类：普通组件(components目录)、路由组件(views目录)

基本配置

1. 安装react-router-dom模块：npm install react-router-dom -S
2. 在根组件App.js中引入路由相关的组件，加载的子组件包括Home.js、News.js、Product.js、NotFound.js

   import { BrowserRouter, Route, NavLink, Switch } from 'react-router-dom'
   render() {
       return(
           
   
               
   
                   首页
                   新闻
                   商品
                   一个不存在的路由
               
               
                   
                   
                   
                     // 404组件
               
           
       )
   }
   

   • 在根组件中，把Home组件的路由配置为path="/"，表示默认加载Home组件；
   • exact：表示严格匹配模式，必须完全匹配，如果设置为false，每次都会匹配 path="/" 的路由；
   • 404组件不需要声明任何path，且必须放在最后面，当上面的所有路由都没有匹配时，则匹配404路由。
3. Redirect 表示重定向，可用于指定默认路由

   import { BrowserRouter, Route, NavLink, Switch, Redirect } from 'react-router-dom'
   render() {
       return(
           
   
               
   
                   首页
                   新闻
                   商品
               
               
                   
                   
                   
                     //默认路由，加载Home组件
               
           
       )
   }
   

4. 一个项目中只有一个，所以 包裹根组件即可！
5. 和必须包裹在中，且只能有一个直接子节点；
6. NavLink 与 Link：它们最终都被解析为HTML中的，但内部会阻止浏览器的默认行为；
   • to 属性用于指定跳转的路由，也可以是一个对象

   • 是的一个特定版本，它会在匹配上当前的url时给已经渲染的元素添加参数；
   • 上的属性：activeClassName、activeStyle、exact、strict ...

     
     //NavLink的默认样式className=""，匹配时的激活样式：activeClassName="" 或 activeStyle={}
     

   • 自定义NavLink：MyNavLink.jsx，统一使用一个activeClassName

     import React, {Component} from 'react'
     import {NavLink} from 'react-router-dom'
     export default class MyNavLink extends Component {
         render() {
             return 
         }
     }
     

7. Route：path指定路由，component指定路由对应的组件；
8. Switch：从上往下匹配时，只要匹配成功，就不会再向下匹配，即只显示与当前路由匹配的Route；
9. 和可以不在同一个组件中，只要路由匹配，都可以实现路由跳转。

路由传值

1. 动态路由传参：

   this.state = { id:12 }
   

   1. :id 表示占位符，对应的NavLink：

      详情
      

   2. 在 Info.js 组件中获取动态路由的参数id：this.props.match.params

      componentDidMount() {
          let { id } = this.props.match.params
      }
      

2. GET方式传参

    
    详情
   

   1. 在 Info.js 组件中，获取参数的对象：this.props.location

       const { search } = this.props.location
      

   2. 但是，GET参数并没有被解析，仍是一个原始字符串：?id=12
   3. 借助第三方模块url解析get参数：npm install url --save

      import url from 'url'  //url模块是node上的内置模块，npm上的url模块并不是node的
      componentDidMount() {
          let { id } = url.parse(this.props.location.search, true).query
      }
      

   4. React不建议使用 ?xxx=xxx的方式传参，而是把 to 设置为对象

      详情
      

3. React解析原始HTML字符串：dangerouslySetInnerHTML属性

   this.state = { content: '
   原始HTML字符串
   ' }
   
   

路由嵌套

1. User.js 组件是根路由 App.js 的动态子组件，路由名称为/user
   1. 在User组件中再配置两个动态子组件：Main.js和Info.js

      import { Route, NavLink, Redirect, Switch } from 'react-router-dom'
      render() {
          return(
      
              
      
                  个人中心
                  用户详情
              
              
      
                  
                      
                      
                  
              
          
      )
      }
      

   2. User组件的路由为/user，则把子组件Main的路由设置为/user/，表示默认加载Main组件;
   3. 亦或者，Redirect 重定向的方式实现默认加载的路由组件

      render() {
          return(
      
              
      
                  个人中心
                  用户详情
              
              
      
                  
                      
                      
                      
                  
              
          
      )
      }
      

   4. Redirect 的 to 属性也可以是一个对象：pathname表示路由地址，其他的是参数；

2. 动态获取父级的路由，再拼接成自己组件的路由

JS控制路由跳转

1. 借助对象：this.props.history 中的方法
2. push()、replace()、goBack()、goForward() ......

   this.props.history.push('/home/user');
   this.props.history.push({ pathname: '/home/user', state: { foo:'bar' } });
   

3. 获取传递的参数：this.props.location

   const { foo } = this.props.location.state;
   

路由守卫

1. 路由守卫其实就是路由拦截，可以做权限控制，它其实也是一个组件，返回值是一个Route组件；

    class RouteGuard extends Component {
        state = {
            isLogin: false
        }
        render() {
            const {component:Component, ...otherProps} = this.props
            return (
                 (
                    //只有已经登录了才允许进入守卫路由对应的组件，没有登录则重定向到登录页
                    this.state.isLogin ?  : 
                    ()
                )}>
            )
        }
    }

2. 在需要控制权限的地方，应用路由守卫

    render() {
        return(
            

                

                    首页
                    新闻
                    我的
                
                
                    
                    
                      // 应用路由守卫
                
            
        )
    }

路由的模块化

1. 用一个数组管理项目中的所有路由，在把这个数组放在一个独立的JS文件中
   1. 在 router.js 中引入相关组件，管理路由

      const routes = [
          { path:'/', component:Home, exact:true },
          { path:'/user', component:User }
      ]
      export default routes;
      

   2. 在根组件App中引入路由模块

      import routes from './route/router.js'
      render(){
          return(
              
      
                  首页
                  用户
              
              {
                  routes.map((route, key) => {
                      if(route.exact) {
                          return 
                      } else {
                          return 
                      }
                  })
              }
          )
      }
      

2. 嵌套路由的管理
   1. 在router.js中

      const routes = [
          { path:'/', component:Home, exact:true },
          { path:'/user', component:User,
              routes:[
                  { path:'/user/', component:Main }, 
                  { path:'/user/info', component:Info }
              ]
          }
      ]
      

   2. 在根组件App中，通过的 render 属性，把子路由传递给子组件

       (
          
      )} />
      

   3. 在User组件中获取子路由：this.props.routes

      render() {
          return(
      
              
      
                  个人中心
                  用户详情
              
              
      
                  {
                      this.props.routes.map((route, key) => {
                          return 
                      })
                  }
              
          
      )
      }
      

3. 子路由的上可以都加上 exact 属性，而根路由的上不行！