react路由提高(Prompt、Redirect、match、Switch)
来源:互联网 发布:jquery json 编辑:程序博客网 时间:2024/05/17 22:09
除了Router、Route、Link这三个react路由的基础搭配使用,还有一些其他的比较重要的组件,比如我们在页面切换时,需要进行一些提示,我们就能使用Prompt组件。
1、Prompt组件
它有一个必须的属性message,用于给用户提示信息。
基本使用:
- 1
这样,每当用户进行切换时,都会提示一条消息。
但是,有时候,我们希望提示消息,有时候我们不希望提示出现,这就用到它的另外一个属性-when。when有两种情况,当它的值是true时,会提示消息。当它的值为false时,不会提示消息。
基本使用方式:
- 1
2、Redirect组件
有些时候,我们匹配一个路径,但是可能这个路径,我们更希望它指向一个新的展示界面,而不是它原本的路径匹配界面。
Redirect组件的必须属性是to属性,表示重定向的新地址。
- 1
- 2
因为你重定向了一个新的地址,所以必须有一个对应的新的地址的Route,来指定重定向的界面。
Redirect组件的基本使用方式:
- 1
可以看出,Redirect重定向是路由的重定向,应该写在组件Route中,一般使用render来实现它,具体实例如下:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
3、match对象
match是一个匹配路径参数的对象,它有一个属性params,里面的内容就是路径参数,除常用的params属性外,它还有url、path、isExact属性。
match的理解,通常使用示例会更好理解一点,下面这就给出这样的一个示例:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
在组件Match中,通过this.props.match.params.id获取了路径的匹配参数。首页参数home,其他页是other。
Match的获取方式:
在Route component中,组件通过this.props.match获取。
在Route render 和Route children中,通过传递一个参数的方式获取。
4、Switch组件
它的特性是我们只渲染所匹配到的第一个路由组件,一般界面渲染的时候,会渲染所有匹配到的路由组件。它的孩子节点只能是Route组件或者Redirect组件。
使用方式:
- 1
- 2
- 3
- 4
- 5
- 6
示例:
- react路由提高(Prompt、Redirect、match、Switch)
- react路由提高(Prompt、Redirect、match、Switch)
- react-native-prompt
- React路由
- React路由
- react路由
- React路由
- react-router Switch 组件不能动态更换子路由的问题
- react路由补充部分(exact、八个路由示例)
- react路由补充部分(exact、八个路由示例)
- react-router 4.x(路由)
- YII路由跳转forward\redirect
- Menu Redirect Prompt when developing in JSF+Primefaces +JQuery
- React-router路由实践
- React-router路由实践
- react-router路由
- react路由学习网站
- React-Router4x 路由
- servlet3-上传文件
- 【百度语音合成】JavaAPI方式语音合成示例
- EventBus详解
- 如何把内网IP映射到公网IP
- iOS app上架图文教程及注意事项
- react路由提高(Prompt、Redirect、match、Switch)
- ios 系统switch样式简述/实现
- 基于Lucene7 IKAnalyzer 报错问题
- Java代码注释XXX-todo-fixme-的意义
- servlet-获取bean
- java.net.SocketException: Unrecognized Windows Sockets error: 10106: create" which imposes a more or
- JSTL标签库
- 交换两个int型变量的方法
- Ubuntu下lede源码的下载与编译