React Router导航组件（二）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u012987546/article/details/79917120

1.react-router-dom使用案例2

案例执行的效果: ( 点击item1和item2实现切换中间的内容: 用到了Router ，Route，NavLink，Link, match ，history )

1.搭建界面布局

案例2是是在案例1的基础上进行开发，没有看过案例1的看上一篇博客

1.下面将案例1中的全部的代码拷贝到案例2中，并指定demo2中的Main.js为应用的首页（如下图：）

2.增加一个Mine页面

import React, { Component } from 'react';
export default class Mine extends Component {
    render(){
        return(
            <div>
                mine
            </div>
        )
    }
}

执行的效果：

3.修改Mine界面的布局

2.Mine页面中tab的切换效果

1.从react-router-dom导入Route 和 Link

2.直接通过 this.props.match.url获取当前页面的路由：/mine

3.给item1和item2 添加 Link组件。

下面的{match.url + “/item1”} 的值是： /mine/item1 , 代表点击item1跳转到 /mine/item1 这个路由

<Link to={match.url + "/item1"} className="mine-item">
      <div>item1</div>
</Link>

4.路由的占位符。当路由符合 /mine/xxx 这个规则的就显示MineItem组件

<Route path={`${match.url}/:itemId`} component={MineItem}/>  // :itemId 是路由url的参数

match对象可以直接通过this.props.match拿到 ：http://reacttraining.cn/web/api/match

5.MineItem组件的实现

{match.params.xxxx} : 获取当前组件所在的路由url的参数

//这个组件直接写在Mine.js文件里面
const MineItem = ({match}) => (
    <div style={{width: '80%', margin: '0 auto', height: '200px', backgroundColor: 'orange'}}>
        <h3>{match.params.itemId}</h3>
    </div>
)

6.执行的效果：

3.使用history来切换路由

1.给mine界面添加多一个tab

执行效果：

2.使用history来切换界面

history的其它函数参考：http://reacttraining.cn/web/api/history

    NoLink(){
        /*可以直接通过this.props.history获取history对象*/
        var history=this.props.history;
        var match=this.props.match;
        /*使用history的push函数来切换路由*/
        history.push(match.url+"/item3");
    }

执行效果：

4.默认显示的界面

1.render 属性与 component 属性基本一样。是该路由对应显示的组件

 <Route exact path={match.url} render={() => (
                    <h3>默认显示组件,请选择你的item</h3>
  )}/>

当点击底部的Mine按键时, 默认会显示下面的文本。