版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u012987546/article/details/79919583
1.react-router-dom使用案例3
案例的执行的效果:( 这个案例主要演示使用Switch , Redirect 和 location )
1.搭建界面布局
案例3是是在案例1的基础上进行开发,没有看过案例1的看上一篇博客
1.下面将案例1中的全部的代码拷贝到案例3中,并指定demo3中的Main.js为应用的首页(如下图:)
2.底部添加两个按钮
NavLink 是 Link的增强版 , 在使用NavLink的时,如果选中时会自动给对应的标签添加active的类名
<footer>
{/*点Home切换页面*/}
<NavLink to={"/"} className="base-footer">
<div>Home</div>
</NavLink>
{/*点About切换页面*/}
<NavLink to={"/about"} className="base-footer">
<div>About</div>
</NavLink>
<NavLink to={"/redirect"} className="base-footer">
<div>Redirect</div>
</NavLink>
<NavLink to={"/noMacth"} className="base-footer">
<div>noMacth</div>
</NavLink>
</footer>
其实 《NavLink to={“/noMacth”} /》 中的 to的值还可以是location对象,
例如 《NavLink to={ { pathname: “/noMacth”, state: { username : xmg } } } /》
location对象 : 对于数据抓取 , 传递和动画非常有用
location对象官网的描述:http://reacttraining.cn/web/api/location
3.使用Switch来唯一匹配路由
switch 的官网描述 : http://reacttraining.cn/web/api/Switch
exact = true : 是精准匹配路由
Redirect :是路由的重定向
{/*匹配唯一路由,只能成功匹配一个*/}
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
{/*请求转发:将 /redirect 的请求转发到 / */}
<Redirect from="/redirect" to="/"/>
{/*没有匹配上的走这里*/}
<Route component={NoMacth}/>
</Switch>
4.NoMacth 组件的编写
直接通过this.props.location
可以拿到location对象 , location对象常用的属性有:
{pathname: "/xxx", search: "", hash: "", state: undefined, key: "i1tqwn"}
location的官网描述 : http://reacttraining.cn/web/api/location
import React, { Component } from 'react';
export default class NoMacth extends Component {
render(){
/*直接通过this.props.location获取location对象 */
var location=this.props.location;
console.log(location); //location对象: {pathname: "/noMacth", search: "", hash: "", state: undefined, key: "i1tqwn"}
return(
/*下面通过location获取URL路径*/
<div>
NoMacth:{location.pathname}
</div>
)
}
}
执行的效果: