榜单详情组件一站式开发|云音乐项目 | 前端进阶之旅

本节代码对应 GitHub 分支: chapter6

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

首先声明路由:

//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)}>

@前端进阶之旅: 代码已经复制到剪贴板

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

本节代码对应 GitHub 分支: chapter6

仓库传送门

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

首先声明路由:

//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)}>

@前端进阶之旅: 代码已经复制到剪贴板

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