路由组件
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 访问路由属性