总结react-router-dom

一、react-router分3种

    1.web 
    2.native
    3.any

二、下载

    npm install react-router-dom

三、按需引入

BrowserRouter或者HashRouter一般在index.js引入，包在外面。

    import {Link, BrowserRouter, HashRouter, Route ,Redirect} from 'react-router-dom'
    import A from '/A'

四、使用路由连接/注册路由

1、无匹配使用redirect,给一个默认值

     <BrowserRouter>
        <Link to='/a'></Link>
        
        <Route path='/a' component={A} />
        <Route path='/b' component={B} />
        <Redirect to='/a' />
        
    </BrowserRouter>

五、一般组件与路由组件

                一般组件                       路由组件
                
    写法:       <Demo />                       <Route path='/demo' component={Demo} 
    
    位置        components                     pages

    props       传什么接什么                    {
                                                history:{
                                                    go:f(),
                                                    goBack:f(),
                                                    goForward:f(),
                                                    push:f(),
                                                    replace:f()
                                                },
                                                location:{
                                                    pathname:'/demo',
                                                    search:'',
                                                    state:undefined
                                                }
                                                metch:{
                                                    params:{},
                                                    path:'/demo',
                                                    url:'/demo'
                                                }
                                              }

六、Link与NavLink

1、NavLink实现路由链接高亮，通过设置activeClassName改变样式名

    <NavLink activeClassName='active2'></NavLink>

七、Switch

1、通常component和path是一一对应

2、Switch提高路由匹配效率

    <Switch>
        ...
    </Switch>

八、引入样式和资源路径问题

    1、使用'/',从根目录去找
    2、使用'%PUBLIC_URL%'  （仅限react脚手架）
    3、使用HashRouter

九、路由严格匹配

1、to与path需要严格匹配

    <Route exact={true}  path='/a' component={A}></Route>

十、多级路由需要带上父路由path,按顺序查找。

十一、路由传参

1、params

    传递参数
    <Link to={`/a/b/${id}`}/${title}`}></Link>
    声明接收
    <Route path='/a/b/:id/:title' component={Detail} /> 
    接收
    const {id , title } = this.props.match.params

2、search

    传递参数
    <Link to={`/a/b/?id=${id}`}&title=${title}`}></Link>
    声明接收（无需接收）
    <Route path='/a/b' component={Detail} /> 
    接收
    const {search } = this.props.location.search
    const {id , title } = qs.parse(search.slice(1))
    
    扩展
    import qs from 'querystring'
    let obj = {name:'tom',age:18}
    console.log(qs.stringify(obj))  
    // name=tom&age=18 
    
    let str= 'name=tom&age=18'
    console.log(qs.parse(str))  
    // {name:'tom',age:18}

3、state

    传递参数
    <Link to={{pathname:'/a/b',state:{id:obj.id,title:obj.title}}></Link>
    声明接收（无需接收）
    <Route path='/a/b' component={Detail} /> 
    接收
    const {id , title } = this.props.location.state

十二、路由跳转

路由链接式跳转，replace和push(默认)

    <Link replace={true} to='/a'></Link>
    <Link replace to='/a'></Link>

编程式路由跳转api ----路由组件或withRouter()包装过的一般组件

    this.props.history.push(url,state)
    this.props.history.replace(url,state)
    this.props.history.go(n)
    this.props.history.goBack()
    this.props.history.goForward()

十三、withRouter(一般组间) ==> 路由组件

    import {withRouter} from 'react-router-dom'

    class A extends Component {
        ...
    }
    export default withRouter(A)

十四、BrowserRouter和HashRouter区别

1、底层原理不同

    BrowserRouter使用的是H5的history API，不兼容IE9以下版本，
    HashRouter使用的是URL的哈希值。

2、URL的表现形式不同

    BrowserRouter的path中没有#
    HashRouter的path中有#

3、刷新影响state不同

    BrowserRouter刷新不影响state
    HashRouter刷新state丢失

4、HashRouter可以解决一些路径错误问题