react-router v4
来源:互联网 发布:linux shell嵌套for 编辑:程序博客网 时间:2024/06/05 23:41
安装模块 react-router-dom
导出组件 { HashRouter, Route,Link,Switch } from 'react-router-dom'
用列:
<HashRouter>
<Route render={({ location }) => (
<ReactCSSTransitionGroup
transitionName="example"
component="div"
transitionEnterTimeout={0}
transitionLeaveTimeout={0}>
<div className='app' key={Math.random()*10000+Math.random()*10000+Math.random()*10000}>
<Header />
<div className="common-content">
<Switch>
<Route exact path="/" location={location} key={location.key} component={Welcome} / >
<Route location={location} key={location.key} path="/home" component={Home} / >
<Route location={location} key={location.key} path="/change-table" component={NoteAndTable} / >
<Route location={location} key={location.key} component={Error} / >
</Switch>
</div>
</div>
</ReactCSSTransitionGroup>
)}/>
</HashRouter>
HashRouter 是路由器上所使用的url 类型 也可以使用 BrowserHistory (自己觉得BrowserHistory 只能跑服务端,打包后在本地没有后台的情况下不能用)
作用: 保持你的 ui 和 url 同步(这个指令上有几个配置属性,一般情况下我都不写)
Route 有三种渲染内容的方法:
- <Route component> 大多数情况使用这种方法根据component={组件名} 的组件创建一个新的React element
- <Route render> render=function 你可以选择传一个在地址匹配时被调用的函数,而不是像使用component属性那样得到一个新创建的React element。使用render属性会获得跟使用component属性一样的route props
- <Route children > 有时候你可能想不管地址是否匹配都渲染一些内容,这种情况你可以使用children属性。它与render属性的工作方式基本一样,除了它是不管地址匹配与否都会被调用。除了在路径不匹配URL时match的值为null之外,children渲染属性会获得与component和render一样的route props。这就允许你根据是否匹配路由来动态地调整UI了,来看这个例子,如果理由匹配的话就添加一个active类:
Route 其他属性
path: 路由名字 (string)
exact: 默认为false 为true 就是url上的路由需要与 所写路由完全相同
strict: 为true结尾有/ 只能匹配 有斜线结尾的url
Switch 组件 是为了用当用户在写的路由在路由配置里面没有的时候显示404界面
当使用 Switch组件时候需要配置一个没有path 路由 component={404组件名}
这样基本上就能使用 react-router v4了
ReactCSSTransitionGroup 这个组件是 页面切换时候的动画组件 需要的可以上网查查
阅读全文
1 0
- react-router v4
- React Router v4
- React Router v4 版本学习指南
- 聊聊 React Router v4 的设计思想
- react-router v4 按需加载
- 使用react router V4(react-router-dom)遇到的一些问题
- react-router 从 v2/v3 to v4 迁移
- react-router V4 版本不能嵌套路由的问题
- React Router v4中component和render的区别
- react-router v4 使用 history 控制路由跳转
- react实战--antd、react-router-dom v4 解决菜单和地址同步问题
- react-router
- React Router
- React/Router
- react-router
- react-router
- react-router
- React-router
- 上传base64格式图片, Illegal base64 character 20
- iOS之来电阻止与身份识别实现
- NKOJ 3253 (CQOI 2015) 标识设计(状压DP)
- web/html5调用摄像头实现二维码扫描
- SSH通过密钥登入.md
- react-router v4
- 利用定时器实现流水灯闪烁同时数码管循环显示1-f
- JavaScript-JSON详解
- SQL优化技巧 改善数据库性能
- 转:深度 | 深度学习与神经网络全局概览:核心技术的发展历程
- Android 打造Bitmap压缩工具库
- 04. JSP 请求转发&包含
- 计算机的处理能力
- Jquery源码架构