React路由
手写路由
控制地址栏
歌手 根据改变渲染不同的组件
路由插件 react-router
react-router
下载安装
npm install react-router-dom
路由的基本使用
HashRouter BrowserRouter 哈希路由 历史路由 作为组件的父容器
控制地址栏的改变
路由跳转后所有的属性 都可以在目标组件的props里进行接受
Link 标签 属性：to、 exact（精准匹配，属性路径和地址栏路径完全匹配）
NavLink标签 属性 to 、exact 、 activeClassName
<NavLink exact to='/singer' activeClassName='selected' className='nav'> 歌手</NavLink>
Route 控制组件的渲染 path exact component render children
render 、children、component都可以显示组件，优先级为 render>children>component,(在同一标签内只能使用一个)
<Route exact path='/singer' component={Singer}></Route>
Switch 只返回第一个匹配到的组件
Redirect 重定向
<HashRouter>
<Link exact to='/singer'>歌手</Link>
<NavLink exact to='/recomment' activeClassName='hehe'>推荐</NavLink>
<Switch>
<Redirect from='/' to='/singer' exact />
<Route path='/singer' component={组件}></Route>
<Route path='/recomment' render={组件}></Route>
<Route path='/singer' children={组件}></Route>
<Route component={404}>
</Switch>
</HashRouter>
编程式导航和声明式导航（寻找路由对象）
<Link>或<NavLink>实现路由的跳转 声明式导航
通过js路由对象的方式叫做编程式导航（ push replace go goBack goForwd ）
注意 :正常创建的组件是没有路由对象的
通过Route 处理过的组件在props里有路由对象
通过withRouter 处理过的组件也有路由对象
路由传参
动态导航 /hehe/:id
this.props.history.push(`/singer/${us}/${ps}`)
在路由对象的match 里获取传递的参数
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:{要传递的数据}})
嵌套路由
在路由里套路由 所有的组价都可以使用 Link、 Switch …
嵌套路由的上一级，千万不能加精准匹配
<Route path='/singer' render={()=>{
<Route></Route>
<Route></Route>
}}></Route>
高阶组件
hoc 本质是一个函数 接受一个组件作为参数 返回一个新的组件
功能性的封装 减少重复代码
一般被高阶组件处理过的组件获取数据 都从props获取
