本篇文章将继续介绍路由的使用.
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获取到路由参数后渲染在页面上
网友评论