先描述下需求吧。
从服务端获取菜单栏要展示的菜单项(如校园公告,乐课网,课程消息,乐答消息,作业消息,...,待办通知),其中校园公告,乐课网和代办通知是一定会有的菜单项(下文称为“常驻嘉宾”),而消息类(如课程消息,乐答消息,作业消息,...)根据运营后台的配置不同而不同(下文称为“本期特邀嘉宾”)。
接口返回数据:
实现思路:
根据type区分不同菜单类型,故可以用type来区分不同路径url。
消息类只是数据不同,页面结构完全相同,用的是同一个组件homeworkNotice。此处涉及动态路由(/homeworkNotice:type).
由于动态路由必须采用“/xxx/:变量”的形式。
写了个方法,为“常驻嘉宾”和“本期特邀嘉宾”设置不同的路由规则。
如此“本期特邀嘉宾”便有了符合动态路由规则的url。调用时如下:
针对出现的“本期特邀嘉宾”之间切换时页面不刷新的问题,做出如下分析:
切换路由时,只是重新render,并未重新构建。要想在切换路由时组件重新构建,重新完成一次生命周期,就需要给render组件加上key。
至此,完美解决。
btw:
如果你对是否结束此次生命周期并没有特别的要求,也可以通过componentDidUpdate(preProps)钩子 函数,或者componentWillReceiveProps(nextProps)判断props.match.params.type是否发生改变。如果变化,手动调用获取数据的接口。
我的这个需求中,需要在componentWillUnmount()方法中调用已读接口,将未读变成已读,所以菜单栏切换时必须要结束本次生命周期。