路由
import React, { Component, Fragment } from "react";
import {HashRouter,BrowserRouter,NavLink,Link,Route,Switch,Redirect} from 'react-router-dom'
import './nav.css'
function Singer (props){
console.log('歌手的props',props)
return(
<div>这里是歌手组件</div>
)
}
function SingerTest (props){
return(
<div>这里是歌手测试组件</div>
)
}
function Recommend (){
return(
<div>这里是推荐组件</div>
)
}
function NotFound (){
return(
<div>你的页面打了样</div>
)
}
class Box extends Component{
render(){
return(
<div>
<h3>路由基础2 - switch</h3>
<BrowserRouter>
<NavLink exact to='/singer' activeClassName='selected' className='nav'> 歌手</NavLink>
<NavLink exact to='/recommend' activeClassName='selected' className='nav'> 推荐</NavLink>
<NavLink exact to='/singer/test' activeClassName='selected' className='nav'> 歌手测试</NavLink>
<Switch>
{/* 小心产生死循环 */}
<Redirect exact from='/' to ='/recommend'></Redirect>
<Route exact path='/singer' component={Singer}></Route>
<Route path='/recommend' component={Recommend}></Route>
<Route path='/singer/test' component={SingerTest}></Route>
<Route component={NotFound}></Route>
</Switch>
</BrowserRouter>
</div>
)
}
}
export default Box
正常的组件内部是没有路由对象的 被路由处理过的组件才有路由对象
BrowserRouter HashRouter 哈希路由和历史路由 所有的路由组件都要放到router里
to属性.地址栏变成什么样
NavLink link的进阶版.主要是多了几个方法
-
NavLink, link 后的自定义对象可跟对象
<Link to={ { pathname: "/singer", search: "?sort=name", hash: "#the-hash", state: { fromDashboard: true } } }>歌手</Link>
路由跳转后所有的属性 都可以在目标组件的props里进行接受
router-view 只能显示一个组件 route路径匹配几个显示几个
为了精准渲染路由 使用exact 相当于严格匹配模式,必须属性路径和地址栏路径
-
switch 自上而下以此匹配 返回第一个已经匹配的组件
-
一般用于所有的路由都不匹配的情况下放回一个404页面
- 只需要在最后添加个404网页就行
{/* 404页面 */} <Route component={NotFound}></Route> -
-
Redirect from从哪来 to 到哪去
- <Redirect exact from='/' to ='/recommend'></Redirect>
-
渲染组件
<Route path='/singer/test' component={SingerTest}></Route> <Route path='/singer/test' redder={SingerTest}></Route> <Route path='/singer/test' children={SingerTest}></Route>
编程式导航和声明式导航
通过<Link><NavLink>实现路由的跳转 声明导航
通过js路由对象的方式叫做编程式导航 push replace go goBack goForwd
注意 :正常创建的组件是没有路由对象的
通过Route 处理过的组件在props里有路由对象
-
通过withRouter 处理过的组件也有路由对象
import {withRouter} from "react-router-dom"
-
处理组件并抛出
let NewComponent =withRouter(CustomNav) // withRouter是一个函数 接受一个组件作为参数 // 返回一个新的组件 在新的组件的props里会被注入路由对象 // withRouter的作用处理一个组件给处理的组件添加路由对象 export default NewComponent ;
路由传参
动态导航
渲染:动态导航 /hehe/:id
-
传参:this.props.history.push(
/singer/${us}/${ps})在路由对象的match 里获取传递的参数
query传参
query /hehe?us=123&ps=123
相当于get方法 接受数据在路由对象的 location里 需要自己做字符解析
this.props.history.push('/singer？us=123&ps=456')
state传参
在路由对象的location里接受
this.props.history.push({pathname:'/recommend',state:{要传递的数据}})
withRouter是一个函数 接受一个组件作为参数
// 返回一个新的组件 在新的组件的props里会被注入路由对象
// withRouter的作用处理一个组件给处理的组件添加路由对象
嵌套路由
-
直接嵌套在组件里
function My (){ console.log('我的组件') return( <div>这里是我的组件 <Route path='/my/info' component={Info}></Route> <Route path='/my/login' component={Login}></Route> </div> ) } -
在渲染里嵌套
<Route path='/my/:id' render={()=>{ return( <div> <h3>我的组件</h3> <hr/> <Link to='/my/info'>我的信息</Link> <Link to='/my/login'>我的登录</Link> <Route path='/my/:id/info' component={Info}></Route> <Route path='/my/:id/login' component={Login}></Route> </div> ) }}></Route> 注意事项
在路由里套路由 所有的组价你都可以使用使用 Link Switch ..
嵌套路由的上一级 千万不能加精准匹配
高阶组件
hoc 本质是一个函数 接受一个组件作为参数 返回一个新的组件
功能性的封装 减少重复代码
一般被高阶组件处理过的组件获取数据 都从props获取
