React路由

路由组件

Switch： <Switch> 的所有子项应为 <Route> 或 <Redirect> 元素 , 渲染与位置匹配的第

一个子元素 <Route> 或 <Redirect> , <Switch> 是独特的，因为它仅仅渲染一个路由。相反，

与位置匹配的每个 <Route> 都会渲染 .

Route： 元素尝试将其路径与当前历史记录位置（通常是当前浏览器 URL ）进行

匹配 , 渲染与位置匹配的组件 ; 如果路由没有路径，将始终匹配 ;

Redirect ： 渲染 <Redirect> 将导航到新位置。新位置将覆盖历史堆栈中的当前位置 ;

          <Switch>
            <Route path="/index" component={Index} />
            <Route exact path="/login" component={Login} />
           
            <Route exact path="/detail" component={Detail} />
            <Redirect exact from='/' to='/index' />
           
            <Route path="*" component={NotFound} />
          </Switch>

Link

最终渲染成 a 标签

NavLink

最终渲染成 a 标签 , 会自动维护 a 标签的 active 类的添加 / 移除 ( 当浏览

器地址栏的地址和哪个 a 标签的路由地址相匹配时 , 该 a 标签会自动添加 active 类 , 其他

不匹配的 a 标签会自动移除 active 类 )

                <NavLink to="/index/home">首页</NavLink>
                <NavLink to="/index/cate">分类</NavLink>
                <NavLink to="/index/gwc">购物车</NavLink>
                <NavLink to="/index/mine">我的</NavLink>

 编程式导航

凡是通过路由匹配渲染出来的组件，都会自动往props对象中添加三个路由对象

（对于不是路由匹配的，可以用withRouter这个高阶组件修饰一下，即可添加这三个路由对象）

this.props.history  //负责跳路由
this.props.location //负责存储路由信息（地址，参数）【固态路由】
this.props.match    //负责存储路由信息（地址，参数）【动态路由】

//编程式导航常用的api
this.props.history.push()
                  .go()
                  .goBack()
                  .goForward()
                  .replace()

路由传参 

动态路由传参

传：this.props.history.push('/detail/'+1)
接：this.props.history.match.params.id

这种传参方式刷新页面不会丢失

固态路由传参

传：this.props.history.push({pathname:'/detail/',query:{id:1,...}}
接：this.props.location.query.id

传：this.props.history.push({pathname:'/detail/',state:{id:1,...}}
接：this.props.location.state.id

这两种传参方式都会将参数隐藏，不显示在地址栏上；且query传参刷新页面参数就会丢失

 路由懒加载

每个组件会被单独打包成一个js文件，访问哪个加载哪个。

import {lazy,Suspense} from 'react'//引入懒加载所提供的

import Home from '../Index/Home'
       改成懒加载写法
var Home=lazy(()=>import('../Index/Home'))

<Suspense fallback={这里可以写html}>
//当你的组件在临时加载期间显示,可做加载条
<Suspense>

 路由渲染方式

一，

<Route path='/home' component={Home}/>
//component值为react元素时每次重新执行render都不会造成子组件执行constructor

<Route path='/home' component={()=>{
                   return <Home/>
                              }}/>
//component值为匿名函数时，每次重新执行render都会造成子组件执行constructor，因为需要重新判断。

二，

<Route path='/home' render={()=>{
                   return <Home/>
                            }}
render值只能是函数父组件的每次重新 render 都不会造成子组件
每次都执行 constructor

三，

<Route path="/home">
 <Home/>
</Route> 
最后一种方式每次（第一次除外）App 执行 render 不会造成 MyHome 重新执行一次
初始化生命周期，只会执行 update 的生命钩子，可以从父组件传递 props 到子组件，但
是这个方式有一个缺点，子组件不能在 props 访问路由属性