dva router4.0 使用实践总结
2017-10-16 00:00
204 查看
一、概述
dva 升级到 2.0 版本以后,也将内部使用的 dva/router 从 react-router@3.0 升级到了 react-router@4.0。react-router@4.0 文档 APIreact-router@4.0 让路由变得更简单,最大特点就是可以路由嵌套,可是如果照搬使用 react-router@4.0 的写法,你会发现在 dva 中是行不通的,查看 dva/router 的源码可以看到:
// dva/router.js module.exports = require('react-router-dom'); module.exports.routerRedux = require('react-router-redux');
其中第一行导出的
react-router-dom就是 react-router@4.0 文件,第二行导出的
react-router-redux是 react-router 配合 redux 使用的中间库。因为 dva 中使用到了 redux,所以我们在配置的时候还需要注意到这一点。
由于 dva 将
react-router-dom和
react-router-redux都封装到了 dva/router 中,在使用 react-router@4.0 和 redux 里面的东西时只需引入 dva/router 这个包即可。
二、dva 中使用 router4.0
router.jsimport React from 'react'; import { routerRedux, Route } from 'dva/router'; import Example from 'routes/Example'; const { ConnectedRouter } = routerRedux; function RouterConfig({ history, app }) { return ( <ConnectedRouter history={history}> <Route path="/" component={Example} /> </ConnectedRouter> ); } export default RouterConfig;
说明:
Route 为
react-router-dom内的标签
ConnectedRouter 为
react-router-redux内的对象 routerRedux 的标签,作用相当于
react-router-dom中的 BrowserRouter 标签,作用为连接 redux 使用。
三、react-router@4.0 常用标签总结
英文不错的建议直接去官网读一手文档,对于理解很有帮助。react-router@4.0 文档 API
以下内容仅为作者在阅读时总结的内容。
1. BrowerRouter
<BrowserRouter basename="/calendar"/> <Link to="/today"/> // 渲染为 <a href="/calendar/today">
2. Route
route 的三种写法<Route component>
<Route render>
<Route children>
route 传给组件的参数
match 跟爸爸有关
isExact 是否完全匹配
params 参数,一般指path中的参数
path <route>中 path 属性的值,与浏览器地址栏 url 进行匹配,“/topics/:topicId”
url Link 或者 a 标签中跳转的地址,一般情况下为浏览器地址栏中地址,如果有 basename,浏览器地址栏为 basename + url 的值,“/topics/components”
location 跟自己有关
pathname 与 match 中的 url 属性相同,“/topics/components”
hash: "" 不知所云,换成 hashHistory 也没有值
key: "" 随机生成一个6位的字符串,唯一喔
search: "" 参数
history
-history对象,可以通过代码控制前进、后退
<route> 属性
path 匹配的路径 “/topics/:topicId”
exact 完全匹配
strict 结尾斜线匹配
3. Redirect
redirect 重定向到新页面会在历史记录栈中替换当前页面,也就是点击浏览器中后退按钮,不会从新页面回到当前页面。to 值为字符串,跳转到新位置,自执行。
to 值为对象,最终会转换为一个位置地址。
push 值为 true 时不会替换当前页面,而是在历史记录栈中新增一条记录。
from 相当于 <route> 中的 path 属性,匹配 url 地址,匹配成功,跳转到另一个 url 地址。
4. Link
to 值为字符串该字符串值会与 <route> 中的 path 属性值进行匹配,如果匹配成功,跳转 <route> 中的 component 属性值。
to 值为对象
对象值最终也会转换为 url 值。to 属性相当于 <a> 标签中的 href 属性。
<Link to={{ pathname: '/courses', search: '?sort=name', hash: '#the-hash', state: { fromDashboard: true } }}/>
replace
相当于微信小程序中的 redirect 属性
设置为 true 表示替换 history 中的当前页面,设置为 false 为在 history 中新增一条历史记录。
5. switch
只会运行其中一个 <route>,子元素只能是 <route> 或者 <redirect>
相关文章推荐
- TortoiseSVN 结合项目实践使用总结
- 关于java使用javacomm20-win32实践总结
- 从工作流状态机实践中总结状态模式使用心得
- 关于java使用javacomm20-win32实践总结 (转)
- 总结在使用VB 6.0和C#编写ActiveX控件的实践 (一)
- 总结在使用VB 6.0和C#编写ActiveX控件的实践 (三)
- 实践总结ajax各种使用方式(下)
- 使用iText生成PDF的一些实践和总结
- 使用redis缓存的实践总结
- 基于RabbitMQ使用的几点实践经验总结
- 关于对Git远程仓库使用的实践总结
- shell中date使用总结-基于自动定期备份mysql实践
- gsoap编译工具的安装与使用(一)----工具的安装实践总结
- FLEX实践—使用CSS的总结
- 总结在使用VB 6.0和C#编写ActiveX控件的实践 (二)
- 使用redis缓存的实践总结
- 关于java使用javacomm20-win32实践总结
- 自己使用window.open和window.showModalDialog在父子窗口传值的实践简单总结
- 实践总结ajax各种使用方式(中)
- 在C#中使用ASV封装编程实践中遇到的问题总结