路由的基本使用
- 明确好界面的导航区、展示区
- 导航区的a 标签改为Link标签
<Link className="list-group-item" to="/about">About</Link>
- 展示区写Route标签进行路径的匹配
<Route path= '/xxxx' component={Demo}/>
- 的最外侧包裹了一个
<BrowserRouter>
或<HashRouter>
路由组件与一般组件
- 写法不同:
一般组件:<Demo/>
路由组件:<Route path=" /demo" component={Demo}/>
- 存放位置不同:.
一般组件: components
路由组件: pages - 接收到的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的使用
- 通常情况下,path和component是一一对应的关系。
- Switch 可以提高路由匹配效率(单一匹配)
路由的严格匹配与模糊匹配
- 默认使用的是模糊匹配(简单记: [ 输入的路径]必须包含要[匹配的路径],且顺序要-致)
- 开启严格匹配:
<Route exact={true} path="/ about" component={About}/>
- 严格匹配不要随便开启,需要再开,有些时候开启会导致无法继续匹配二级路由。(注意)
向路由组件传递参数
- params 参数
- params参数
路由链接(携带参数):<Link to= '/demo/test/tom/18'}>详情</Link>
注册路由(声明接收):<Route path=" /demo/test/:name/:age" component={Test}/>
接收参数: const {name,age} = this . props . match. params - search参数
路由链接(携带参数):<Link to=' /demo/test ?name=tom&age=18'}>详情</Link>
注册路由(无需声明,正常注册即可):<Route path=" /demo/test" component={Test}/>
接收参数: const {search} = this. props . location
备注:获取到的search是urlencoded编码字 符串,需要借助querystring解析 - state参数
路由链接(携带参数):<Link to={{path: '/demo/test' , state: {name: 'tom' , age :18}}}>详情</Link>
注册路由(无需声明,正常注册即可):<Route path=" /demo/test" component={Test}/>
接收参数: this . props . location. state
备注:刷新也可以保留住参数。
- params参数
router的push与replace模式
- 默认为push模式, 会存在history的历史记录
- replace 模式不会产生历史记录
<Link replace to={`/home/message/detail/${mapObj.id}/${mapObj.title}`}>{ mapObj.title }</Link>
编程式路由
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的区别
- 底层原理不一样:
BrowserRouter使用的是H5的history API, 不兼容IE9及以下版本。
HashRouter使用的是URL的哈希值。 - ur1表现形式不一-样
BrowserRouter的路径中没有#,例如: localhost:3000/demo/test
HashRouter的路径包含#,例如: localhost:3000/#/demo/test - 刷新后对路由state参数的影响
(1) BrowserRouter没有任何影响,因为state保 存在history对象中。
(2) HashRouter刷新后会导致路由state参数的丢失。!!! - 备注: HashRouter 可以用于解决一些路径错误相关的问题。
项目地址
gitee地址: https://gitee.com/weiyao11/react-router