react路由

路由

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(
    这里是歌手组件
  )
}
function SingerTest (props){
  return(
    这里是歌手测试组件
  )
}
function Recommend (){
  return(
    这里是推荐组件
  )
}
function NotFound (){
  return(
    你的页面打了样
  )
}
class Box extends Component{
  render(){
    return(
      
        路由基础2 - switch
        
           歌手 
           推荐
           歌手测试
          
            {/* 小心产生死循环 */}
            
            
            
            
           
            
          
            
        

      
      
    )
  }
}

export default Box

正常的组件内部是没有路由对象的被路由处理过的组件才有路由对象
BrowserRouter HashRouter 哈希路由和历史路由所有的路由组件都要放到router里
to属性.地址栏变成什么样
NavLink link的进阶版.主要是多了几个方法
NavLink, link 后的自定义对象可跟对象
```
 歌手
```

路由跳转后所有的属性都可以在目标组件的props里进行接受
router-view 只能显示一个组件 route路径匹配几个显示几个
为了精准渲染路由使用exact 相当于严格匹配模式,必须属性路径和地址栏路径
switch 自上而下以此匹配返回第一个已经匹配的组件
- 一般用于所有的路由都不匹配的情况下放回一个404页面
  - 只需要在最后添加个404网页就行
```
 {/* 404页面 */}
             
```
Redirect from从哪来 to 到哪去
- <Redirect exact from='/' to ='/recommend'>Redirect>
渲染组件

编程式导航和声明式导航

通过实现路由的跳转声明导航
通过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(
    这里是我的组件

        
        

      
  )
}

在渲染里嵌套

注意事项
在路由里套路由所有的组价你都可以使用使用 Link Switch ..
嵌套路由的上一级千万不能加精准匹配

高阶组件

hoc 本质是一个函数接受一个组件作为参数返回一个新的组件

功能性的封装减少重复代码

一般被高阶组件处理过的组件获取数据都从props获取