react-router 多路由共用同个组件,切换不刷新

先描述下需求吧。

从服务端获取菜单栏要展示的菜单项(如校园公告,乐课网,课程消息,乐答消息,作业消息,...,待办通知),其中校园公告,乐课网和代办通知是一定会有的菜单项(下文称为“常驻嘉宾”),而消息类(如课程消息,乐答消息,作业消息,...)根据运营后台的配置不同而不同(下文称为“本期特邀嘉宾”)。

接口返回数据

实现思路:

根据type区分不同菜单类型,故可以用type来区分不同路径url。

消息类只是数据不同,页面结构完全相同,用的是同一个组件homeworkNotice。此处涉及动态路由(/homeworkNotice:type).

由于动态路由必须采用“/xxx/:变量”的形式。

写了个方法,为“常驻嘉宾”和“本期特邀嘉宾”设置不同的路由规则。

如此“本期特邀嘉宾”便有了符合动态路由规则的url。调用时如下:

针对出现的“本期特邀嘉宾”之间切换时页面不刷新的问题,做出如下分析:

切换路由时,只是重新render,并未重新构建。要想在切换路由时组件重新构建,重新完成一次生命周期,就需要给render组件加上key。

至此,完美解决。

btw

如果你对是否结束此次生命周期并没有特别的要求,也可以通过componentDidUpdate(preProps)钩子 函数,或者componentWillReceiveProps(nextProps)判断props.match.params.type是否发生改变。如果变化,手动调用获取数据的接口。

我的这个需求中,需要在componentWillUnmount()方法中调用已读接口,将未读变成已读,所以菜单栏切换时必须要结束本次生命周期。

猜你喜欢

转载自blog.csdn.net/MingleHDU/article/details/92992809