本节代码对应 GitHub 分支: chapter6

仓库传送门 (opens new window)

已经走到了这里，恭喜你完成了这一章最复杂的部分。推荐歌单详情都做完了，再来开发排行榜单详情就简直易如反掌了。

首先声明路由:

//rank 部分
{
  path: "/rank/",
  component: Rank,
  key: "rank",
  routes: [
    {
      path: "/rank/:id",
      component: Album
    }
  ]
},

在 Rank/index.js 中:

// 之前排行歌单不存在的问题已经收到小伙伴的 pr，完美解决，因此直接拿到 id 跳转即可，无关代码已经在当前分支删除
// 实现跳转路由函数
const enterDetail = (detail) => {
  props.history.push (`/rank/${detail.id}`)
}

// 绑定事件
<ListItem key={item.coverImgId} tracks={item.tracks} onClick={() => enterDetail (item)}>

你没看错，排行榜单详情页这里就开发完了，这就是组件复用的威力。

阅读全文