React Router导航组件（三）

版权声明：本文为博主原创文章，未经博主允许不得转载。 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>
        )
    }
}

执行的效果：