先描述下需求吧。

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

接口返回数据 ：

实现思路：

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

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

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

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

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

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

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

至此，完美解决。

btw ：

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

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

今天学习了 react 的重点知识 路由 ,这个知识点是 react 中的一大块,大家有兴趣的话可以跟随作者的文章继续学习呦 SPA的理解 单页Web应用（single page web application，SPA）。 整个应用只有一个完整的页面。 点击页面中的链接不会 刷新 页面，只会做页面的局部更新。 数据都需要通过ajax请求获取, 并在前端异步展现。 路由 的理解 ① 什么是 路由 ? 一个 路由 就是一个映射关系(key:value) key为路径, value可能是function或component 在使用 react 的history.push()方法进行 路由 跳转时， 组件 重复加载两次。代码案例如下： this.props.history.push(`/xxx/xxxx?title=参数`) 后面多次检查代码后发现，是在使用history.push()方法时，参数值为中文才会出现该问题，其他类型则不会出现该问题。 仔细追究其原因，应该是在进行带参数跳转时，浏览器会自动对中文进行转码，然后又会导致router的history方法监听浏览器地址栏变化。也就