三.react导航 Router (二)

本篇文章将继续介绍路由的使用.

1.页面布局是在上篇Router(一)的基础上,整体效果如下:

(分别点击"子菜单一",'子菜单二','子菜单三' 内容对应显示 "item1"  "item2"  "item3" ;             点击"子菜单四" 会显示默认的 '这是默认现实的内容 ')

2.步骤:

    (1)引入路由需要的 Link,Route

    (2)分别编辑占位Router和路由切换的菜单

        通过this.props.match获取到match对象,

        match.url指当前的路由,

        占位Route中用match.url后面拼接的'/: itemId' 对应路由中的'/item1','/item2')       

(子菜单一和子菜单二属于同一类,         子菜单三切换路由的方式较特殊,但前三个菜单用的是同一个组件,        子菜单四属于默认内容,路由就是match.url,后面不加参数,所以菜单四的占位Route跟前三个不能用同一个,要另写):

点击子菜单三的方法中用this.props.history获取history对象,再用history.push方法改变路由,注意也要加上match.url  ; 点击前三个子菜单时的内容组件ItemCom 中的参数match是在一开头获取到的,用match.params.itemId获取到路由参数后渲染在页面上