React第三次总结(路由、嵌套路由、withRouter、编程式路由)

路由的基本使用

1. 明确好界面的导航区、展示区
2. 导航区的a 标签改为Link标签
   <Link className="list-group-item" to="/about">About</Link>
3. 展示区写Route标签进行路径的匹配
   <Route path= '/xxxx' component={Demo}/>
4. 的最外侧包裹了一个<BrowserRouter>或<HashRouter>

路由组件与一般组件

1. 写法不同:
   一般组件: <Demo/>
   路由组件: <Route path=" /demo" component={Demo}/>
2. 存放位置不同:.
   一般组件: components
   路由组件: pages
3. 接收到的props不同:
   一般组件:写组件标签时传递了什么，就能收到什么
   路由组件:接收到三个固定的属性

   history:
       action: "PUSH"
       block: ƒ block(prompt)
       createHref: ƒ createHref(location)
       go: ƒ go(n)
       goBack: ƒ goBack()
       goForward: ƒ goForward()
       length: 50
       listen: ƒ listen(listener)
       location: {pathname: "/about", search: "", hash: "", state: undefined, key: "biwqw6"}
       push: ƒ push(path, state)
       replace: ƒ replace(path, state)
   location:
       hash: ""
       key: "biwqw6"
       pathname: "/about"
       search: ""
       state: undefined
   match:
        isExact: true
        params: {}
        path: "/about"
        url: "/about"
   

NavLink与封装NavLink

1. NavLink可以实现路由连接的高亮,通过activeClassName指定样式名。
2. 标签体内容是一个特殊的标签属性
3. 通过this.props.children 可以获取标签体内容

Switch的使用

1. 通常情况下,path和component是一一对应的关系。
2. Switch 可以提高路由匹配效率(单一匹配)

路由的严格匹配与模糊匹配

1. 默认使用的是模糊匹配(简单记: [ 输入的路径]必须包含要[匹配的路径]，且顺序要-致)
2. 开启严格匹配:<Route exact={true} path="/ about" component={About}/>
3. 严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由。(注意)

向路由组件传递参数

1. params 参数
   1. params参数
      路由链接(携带参数): <Link to= '/demo/test/tom/18'}>详情</Link>
      注册路由(声明接收): <Route path=" /demo/test/:name/:age" component={Test}/>
      接收参数: const {name,age} = this . props . match. params
   2. search参数
      路由链接(携带参数):<Link to=' /demo/test ?name=tom&age=18'}>详情</Link>
      注册路由(无需声明，正常注册即可):<Route path=" /demo/test" component={Test}/>
      接收参数: const {search} = this. props . location
      备注:获取到的search是urlencoded编码字 符串，需要借助querystring解析
   3. state参数
      路由链接(携带参数):<Link to={{path: '/demo/test' , state: {name: 'tom' , age :18}}}>详情</Link>
      注册路由(无需声明，正常注册即可):<Route path=" /demo/test" component={Test}/>
      接收参数: this . props . location. state
      备注:刷新也可以保留住参数。

router的push与replace模式

 - 默认为push模式, 会存在history的历史记录
 - replace 模式不会产生历史记录 

    <Link replace to={`/home/message/detail/${mapObj.id}/${mapObj.title}`}>{ mapObj.title }</Link>&nbsp;&nbsp;

编程式路由

 this.props.history.push(`/home/message/detail/${id}/${title}`)

 this.props.history.replace(`/home/message/detail/${id}/${title}`)

借助this.props.history对象上的API对操作路由跳转、前进、后退

• this.props. history push()
• this.props.history replace()
• this.props.history goBack()
• this.props.history goForward()
• this.props.history.go()

withRouter的用法

withRouter 可以加工一般组件,将一般组件变成路由组件的问题

import React, { Component } from 'react'

import { withRouter } from 'react-router-dom'
 class Header extends Component {
    render() {
        return (
            <div className="page-header">
                <h2>React Router Demo</h2>
                </div>
        )
    }
}

export default withRouter(Header)

BrowserRouter与HashRouter的区别

1. 底层原理不一样:
   BrowserRouter使用的是H5的history API， 不兼容IE9及以下版本。
   HashRouter使用的是URL的哈希值。
2. ur1表现形式不一-样
   BrowserRouter的路径中没有#,例如: localhost:3000/demo/test
   HashRouter的路径包含#,例如: localhost:3000/#/demo/test
3. 刷新后对路由state参数的影响
   (1) BrowserRouter没有任何影响，因为state保 存在history对象中。
   (2) HashRouter刷新后会导致路由state参数的丢失。!!!
4. 备注: HashRouter 可以用于解决一些路径错误相关的问题。

项目地址

gitee地址: https://gitee.com/weiyao11/react-router