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

先描述下需求吧。

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

接口返回数据：

实现思路：

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

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

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

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

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

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

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

 

至此，完美解决。

btw：

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

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