react-router基本使用笔记

是第三方开发的路由

react-router官方文档

react-router
react-router-dom 这个会依赖上面的包，所以直接安装这个就好了

router 三种渲染方式

BrowserRouter是路由的根组件，只能接收一个子元素，定义了路由作用的范围

import {BrowserRouter/*history模式*/,Route/*一个路由的配置项*/} from ' react-router-dom'

···
<BrowserRouter>
   /*BrowserRouter是路由的根组件，只能接收一个子元素，定义了路由作用的范围*/
    <div className="app">
    
    <Link to="/one">one</Link>
    <Link to="/two">two</Link>
    
    
    <Router path="/one"/*匹配路径*/ component={One}/*展示组件*/ />
    <Router path="/two" component={Two} />
    ....
    </app>
</BrowserRouter>

Route标签渲染组件的方式，有三种

1.component

<Router path="/two" component={Two} />

2.render

<Router path="/two" render={()=>{
    return(
        <mark>test</test>
    )
}} />

<Router path="/two" render={()=>{
    return <Two data={this.state.title}>      //这样的写法更容易做数据的传递
}} />

3.children

<Router path="/two" children={()=>{  //  path不管为啥值，里面的组件都会展示
    return(
        <mark>test</test>
    )
}} />

Router 上的属性

 path:string|string[]  //匹配数组中的路径
 exact  完全匹配才展示
 strict:bool  默认多了/少了/无所谓  (本来是要设置后不匹配 这个功能没实现)
 sensitive  大小写是否敏感

history (实现编程式路由)

使用component方式实例化组件时，router实例化的时候会给组件传值
props上面的值

props: 
    match:
      path: 配置的path
      url: 地址栏的地址
      isExact: 是否完全匹配
      params: 动态路由的参数
    history:
      push: 
      replace:
      go:
      goBack:
      goForward: 
    location:
      state: 用于传参的

 path="/one/:id"   参数为必传    this.props.
 <Link to={{pathname:'one' state:{id: 1}}} > </Link>           参数非必传写法

使用render或children 也要实现获得路由对象

render(props)=><One {...props} />
children(props)=><One {...props} />

children存在的意义: (虽然它的这个结构不管path设置什么值，都显示为什么还有用，而不是直接显示组件)
为了获得路由的props

路由其他属性

basename
getUserConfirmation

getUserConfirmation{(massage,callback){
     
}}

keyLength 包裹长度

Link 没有样式
换成 navLink

<NavLink to="/faq" activeClassName="selected">
  FAQs
</NavLink>

重定向：

<Router path="/" exact render={()=>{
   reuturn <Redirect to="/movie"> 
} />

匹配404
Switch从上往下匹配，只匹配一个后面的不再匹配

<Switch>
...
<Router compontent={NotFind}>
</Switch>