react路由提高(Prompt、Redirect、match、Switch)
来源:互联网 发布:淘宝怎么看买家秀 编辑:程序博客网 时间:2024/06/01 15:25
除了Router、Route、Link这三个react路由的基础搭配使用,还有一些其他的比较重要的组件,比如我们在页面切换时,需要进行一些提示,我们就能使用Prompt组件。
1、Prompt组件
它有一个必须的属性message,用于给用户提示信息。
基本使用:
<Prompt message="您确定您要离开当前页面吗?"/>
这样,每当用户进行切换时,都会提示一条消息。
但是,有时候,我们希望提示消息,有时候我们不希望提示出现,这就用到它的另外一个属性-when。when有两种情况,当它的值是true时,会提示消息。当它的值为false时,不会提示消息。
基本使用方式:
<Prompt when={true} message="您确定要离开当前页面吗?"/>
2、Redirect组件
有些时候,我们匹配一个路径,但是可能这个路径,我们更希望它指向一个新的展示界面,而不是它原本的路径匹配界面。
Redirect组件的必须属性是to属性,表示重定向的新地址。
<Redirect to='/new-path' /><Route path='/new-path' component={NewPage}/>
因为你重定向了一个新的地址,所以必须有一个对应的新的地址的Route,来指定重定向的界面。
Redirect组件的基本使用方式:
<Route path="/home" render={()=><Redirect to="/other"/>}/>
可以看出,Redirect重定向是路由的重定向,应该写在组件Route中,一般使用render来实现它,具体实例如下:
import React,{ Component } from "react";import { render } from "react-dom";import { BrowserRouter as Router, Route, Link, Prompt,Redirect } from "react-router-dom";class Home extends Component{ render(){ return ( <div>this a Home page</div> ) }}class Other extends Component{ render(){ return ( <div>this a Other page</div> ) }}class Main extends Component{ constructor(props){ super(props); this.state = { toast: false, } } render(){ return ( <Router> <div> <ul> <li><Link to="/home">首页</Link></li> <li><Link to="/other">其他页</Link></li> </ul> <Route path="/home" render={()=><Redirect to="/other"/>}/> <Route path="/other" component={Other}/> </div> </Router> ) }}render(<Main />,document.getElementById("root"));//这个实例中,因为重定向,所以每个路由展示界面都是other界面
3、match对象
match是一个匹配路径参数的对象,它有一个属性params,里面的内容就是路径参数,除常用的params属性外,它还有url、path、isExact属性。
match的理解,通常使用示例会更好理解一点,下面这就给出这样的一个示例:
import { render } from "react-dom";import { BrowserRouter as Router, Route, Link, Prompt,Redirect } from "react-router-dom";class Match extends Component{ render(){ return ( <div>id:{this.props.match.params.id}</div> ) }}class Main extends Component{ constructor(props){ super(props); } render(){ return ( <Router> <div> <ul> <li><Link to="/home">首页</Link></li> <li><Link to="/other">其他页</Link></li> </ul> <Route path="/:id" component={Match}/> </div> </Router> ) }}//id就是路径匹配参数。render(<Main />,document.getElementById("root"));
在组件Match中,通过this.props.match.params.id获取了路径的匹配参数。首页参数home,其他页是other。
Match的获取方式:
在Route component中,组件通过this.props.match获取。
在Route render 和Route children中,通过传递一个参数的方式获取。
4、Switch组件
它的特性是我们只渲染所匹配到的第一个路由组件,一般界面渲染的时候,会渲染所有匹配到的路由组件。它的孩子节点只能是Route组件或者Redirect组件。
使用方式:
import { Switch } from "react-router-dom";<Switch> <Route path="/" component={Test1} /> <Route path="/Test" component={Test2} /></Switch>
示例:
import React,{ Component } from "react";import { render } from "react-dom";import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";class Home extends Component{ render(){ return ( <div>Home</div> ) }}class Other extends Component{ render(){ return ( <div>Other</div> ) }}class Switchs extends Component{ render(){ return ( <div>Switchs test</div> ) }}class Main extends Component{ constructor(props){ super(props); } render(){ return ( <Router> <div> <ul> <li><Link to="/home">首页</Link></li> <li><Link to="/other">其他页</Link></li> </ul> <Switch> <Route path="/:id" component={Switchs}/> <Route path="/home" component={Home}/> <Route path="/other" component={Other}/> </Switch> </div> </Router> ) }}render(<Main />,document.getElementById("root"));
- 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 路由
- i miss you
- sublime text3中中文件名显示为方框,如何解决?
- Kotlin Reference (二) idioms 一些常用方式
- 如何节省内存空间
- 蓝桥-BASIC-27-2n皇后问题
- react路由提高(Prompt、Redirect、match、Switch)
- xml生成
- 动态顺序表(C语言实现)
- leetcode 42. Trapping Rain Water
- 解决oracle速度变慢
- angular2 Http请求
- [LeetCode] Unique Paths II 起点与终点确定的路径数II
- 插入法 排列 linked list
- Python基础(4)-文件操作