React-Router4x 路由
来源:互联网 发布:米兔积木机器人 编程 编辑:程序博客网 时间:2024/05/21 04:42
React-router@4.0
一、安装
1、安装 'react-router-dom'
注:react-router-dom是对react-router做了一些小升级的库,代码基于react-router
二、使用
//在index文件里配置陆路由
import Reactfrom 'react'
import {BrowserRouteras Router, Route, Link}from 'react-router-dom'
const Basic =() => (
<Router>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/page1">Page1</Link></li>
<li><Link to="/page2">Page2</Link></li>
</ul>
<hr/>
<Routeexact path="/" component={Home}/>
<Route path="/page1" component={Page1}/>
<Route path="/page2" component={Page2}/>
</div>
</Router>
)
1、 Router这个组件还是一个容器,Router下面可以放任意标签
2、 Link标签依然可以理解为a标签,点击会改变浏览器url的hash值,通过Route标签捕获url并且返回component属性中定义的组件。
3、 exact这个关键字是将"/"做唯一匹配,否则"/"和"/xxx"都会匹配到path为"/"的路由,制定exact后,"/page1"就不会再匹配到"/"了
通过Route路由的组件,可以拿到一个match参数,这个参数是一个对象,其中包含几个数据:
· isExact:刚才已经说过这个关键字,表示是为作全等匹配
· params:path中包含的一些额外数据
· path:Route组件path属性的值
· url:实际url的hash值
·
例如-写法一:
const Page2 = ({ match }) => {
console.log(match.params)
return <div>page2</div>
}
写法二:
class Page2 extends Component {
render() {
console.log(this.props.match.params)
return <div>page2</div>
}
}
1、 可以通过传参数{match}获取url参数
2、 可以通过this.props获取url参数
例如:
url:"/page1/book"
path:"/page1/:1"
isExact:true
params:{ 1:"book" }
<Router>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to={`/page1/book`}>Page1</Link></li>
<li><Link to="/page2/2">Page2</Link></li>
<li><Link to="/page3/3">Page3</Link></li>
</ul>
<hr/>
<Route exact path="/" component={App}/>
<Route path="/page1/:1" component={Page1}/>
<Route path="/page2/:2" component={Page2}/>
<Route path="/page3/:属性名" component={Page3}>
</Route>
</div>
</Router>
Route的path中冒号":"后的部分相当于通配符,而匹配到的url将会把匹配的部分作为match.param中的属性传递给组件,属性名就是冒号后的字符串。
三、Router标签
上面的例子中我import的Router是BrowserRouter,这是什么东西呢?
如果你用过老版本的react-router,你一定知道history。
history是用来兼容不同浏览器或者环境下的历史记录管理的,当我跳转或者点击浏览器的后退按钮时,history就必须记录这些变化,而之前的react-router将history分为三类。
· hashHistory老版本浏览器的history
· browserHistory h5的history
· memoryHistory node环境下的history,存储在memory(内存)中
memory: ['mem(ə)rɪ]
四、Route标签
在例子中你可能注意到了Route的几个prop
· exact: propType.bool
· path: propType.string
· component: propType.func
· render: propType.func
他们都不是必填项,注意,如果path没有赋值,那么此Route就是默认渲染的。
Route的作用就是当url和Route中path属性的值匹配时,就渲染component中的组件或者render中的内容。
- React-Router4x 路由
- React路由
- React路由
- react路由
- React路由
- React-router路由实践
- React-router路由实践
- react-router路由
- react路由学习网站
- 20、react之 路由
- React-router路由实践
- react-router 路由匹配
- react-router 路由
- react路由配置
- React学习(六):路由
- react默认路由嵌套子路由
- (二)创建react-router路由
- 从 React Router 谈谈路由
- 数学(3) 各种数学分布,高斯,伯努利,二项,多项,泊松,指数,Beta,Dirichlet
- Brekeke SIP Server搭建
- Caffe中Layer注册机制
- Unity3d 滑动事件--向上、向下、向左、向右(PC好用但是手机滑动不是很理想)
- IDEA没找到新建.java文件解决
- React-Router4x 路由
- openTSDB安装步骤
- spring data mongodb高级查询语句的使用(网上基本没资料)
- 线性代数的本质
- Long-term Recurrent Convolutional Networks for Visual Recognition and Description
- 测试用例的设计
- google访问
- Tuxera NTFS for Mac激活码输不进去咋回事
- Activiti入门教程十(详解历史服务组件HistoryService)