React Router的Route的使用
Route 是 React Router中用于配置路由信息的组件,每当有一个组件需要根据 URL 决定是否渲染时,就需要创建一个 Route。
1) path
每个 Route 都需要定义一个 path 属性,path 属性是一个url,当 URL 匹配一个 Route 时,这个 Route 中定义的组件就会被渲染出来。
2)Route 渲染组件的方式
(1)component
component 的值是一个组件,当 URL 和 Route 匹配时,Component属性定义的组件就会被渲染。例如:
<Route path='/foo' component={Foo} >
当 URL = "http://example.com/foo" 时,Foo组件会被渲染。
(2) render
render 的值是一个函数,这个函数返回一个 React 元素。这种方式方便地为待渲染的组件传递额外的属性。例如:
<Route path='/foo' render={(props) => {
<Foo {...props} data={extraProps} />
}}>
</Route>
Foo 组件接收了一个额外的 data 属性。
(3)children
children 的值也是一个函数,函数返回要渲染的 React 元素。 与前两种方式不同之处是,无论是否匹配成功, children 返回的组件都会被渲染。但是,当匹配不成功时,match 属性为 null。例如:
<Route path='/foo' render={(props) => {
<div className={props.match ? 'active': ''}>
<Foo {...props} data={extraProps} />
</div>
}}>
</Route>
如果 Route 匹配当前 URL,待渲染元素的根节点 div 的 class 将设置成 active.
React Router的Route的使用的更多相关文章
- [React] React Router: Route Parameters
A router library is no good if we have to hardcode every single route in our application. In this le ...
- [React] React Router: Router, Route, and Link
In this lesson we'll take our first look at the most common components available to us in react-rout ...
- 【react router路由】<Router> <Siwtch> <Route>标签
博客 https://www.jianshu.com/p/ed5e56994f13?from=timeline 文档 http://react-guide.github.io/react-router ...
- [React Router v4] Intercept Route Changes
If a user has entered some input, or the current Route is in a “dirty” state and we want to confirm ...
- [React Router v4] Render Multiple Components for the Same Route
React Router v4 allows us to render Routes as components wherever we like in our components. This ca ...
- [React Router v4] Conditionally Render a Route with the Switch Component
We often want to render a Route conditionally within our application. In React Router v4, the Route ...
- [转] React Router 使用教程
PS:react-route就是一个决定生成什么父子关系的组件,一般和layout结合起来,保证layout不行,内部的子html进行跳转 你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系. ...
- [Redux] Navigating with React Router <Link>
We will learn how to change the address bar using a component from React Router. In Root.js: We need ...
- [Redux] Adding React Router to the Project
We will learn how to add React Router to a Redux project and make it render our root component. Inst ...
随机推荐
- Optaplanner规划引擎的工作原理及简单示例(1)
在之前的文章中,老猿已介绍过APS及规划的相关内容,也对Optaplanner相关的概念和一些使用示例进行过介绍,接下来的文章中,我会自己做一个规划小程序 - 一个关于把任务分配到不同的机台上进行作来 ...
- Pytest高级进阶之Fixture
From: https://www.cnblogs.com/feiyi211/p/6626314.html 一. fixture介绍 fixture是pytest的一个闪光点,pytest要精通怎么能 ...
- 移植mysql到ARM(AM335x)
一,编译ncurses 编译mysql需要依赖ncurses,先编译ncurses 1.下载ncurses 下载路径是ftp://ftp.gnu.org/gnu/ncurses,选择下载的是ncurs ...
- 【Eclipse】_Eclipse自动补全增强方法 & 常用快捷键
一,Eclipse自动补全增强方法 在Eclipse中,从Window -> preferences -> Java -> Editor -> Content assist - ...
- Heroku 教程
中文 https://www.jianshu.com/p/7bc34e56fa39 http://www.bjhee.com/flask-heroku.html 官方 Getting Started ...
- OkHttp之Interceptor
先看RealCall 发送一个请求,我们会先创建一个request,然后使用okHttpClient.newCall(request),创建一个call进行网络请求,这个call,就是RealCall ...
- SSD 的介绍 -------转载
本文转载自: http://www.sohu.com/a/258190629_494938 背景 SSD(Solid-State Drive)是目前正处于鼎盛时期的存储设备.相较于传统的硬盘存储器 ...
- 自己的mongodb的CRUD封装
工具类:package Utils; import com.google.common.collect.Lists; import com.mongodb.MongoClient; import co ...
- vue-cli 发布部署IIS
有些时候我们的服务器不用的是node,也许是IIS,这样就需要把工程构建出来,与IIS集成. 构建的命令如下 cnpm run build 将其中的dist文件夹拷贝出来,放到IIS的发布目录,在浏览 ...
- Bootstrap switch 切换状态踩坑
Boostrap switch 下载地址(http://www.bootcss.com/p/bootstrap-switch/),同时配有一些简单的用例. 其中写到 Toggle State切换状态的 ...