9. 导航到曲目页面
3m
你当前正在使用本课程的旧版本。 查看课程变更日志.

👉 连接两个页面

我们的曲目页面已经准备就绪，但除非我们手动在浏览器地址栏中输入正确的路径和曲目 ID，否则我们无法访问它。是时候找出从主页到曲目页面的导航方式了。

这发生在曲目卡片上。我们打开track-card.js 文件，具体路径为 client/src/containers。

我们使用Reach Router 作为我们的路由实现，因此我们在顶部导入它们的 Link 组件。

import { Link } from "@reach/router";

我们需要将 CardContainer 组件转换为 Link，但仍然保留我们的美观样式。让我们向下滚动到下面，找到将此组件定义为样式化的 div 的位置。

用 Link 组件替换 'div'。

const CardContainer = styled(Link)({

好吧，我们来滚动回到顶部，设置我们的导航。

我们需要从 track 属性中访问 id，因此除了我们已经拥有的其他音轨 之外，我们还要对其进行解构。

const { title, thumbnail, author, length, modulesCount, id } = track;

然后我们在 CardContainer 中为 to 属性添加一个属性，当组件被单击时，这个属性将告诉 应该去哪里。在我们的例子中，我们将希望导航到 track/id 路径，将音轨的 ID 传递给它。

<CardContainer
   to={`/track/${id}`}
>

让我们回到 localhost:3000 上的网站主页。

我们仍然有带有音轨卡片网格的网站主页，所以我们没有在那一块出现问题。现在如果我们单击一张卡片，我们就会进入那条音轨的页面。

真棒！我们可以回到网站主页，单击其他一些音轨并查看它们的数据是否也能正常加载。

你能从网站主页导航到正确的音轨页面吗？音轨“Cat-strophysics, master class”上的最后一个模块是什么？

😲 幕后缓存

现在你可能会注意到，如果我们单击之前已经单击过的音轨，页面会弹出得很快！与我们之前从未单击过的音轨相比，我们可以看到在页面上看到任何详细信息之前，加载图标正在旋转。

这种快速加载行为要感谢 ！

我们第一次发送一个 给 时，会将结果存储在缓存中。 下一次我们尝试发送相同的查询（例如，再次导航到同一页面）时，它将从缓存加载结果，而无需通过网络发送不必要的调用。

相当方便！ 负责处理这款缓存行为，使用我们在 Lift-off I 处设置的 InMemoryCache，并且我们会在另一系列中更深入地研究具体信息和如何使用缓存。

🎉 你做到了！

至此，你已完成 Lift-off 系列的第三部分，恭喜！

在完成所有步骤后，你的项目应如下所示。

如果你想更进一步，我们有一个奖励课程项目，让你通过构建模块页面来锻炼新技能。使用 Lift-off 实验来接受这项挑战。

在我们的下一门课程 Lift-off IV中，我们将学习如何使用 修改数据。在那里见！

上一节

分享你对本节课的问题和评论

你的反馈有助于我们改进！如果你遇到困难或困惑，请告诉我们，我们会帮助你。所有评论都是公开的，并且必须遵循 Apollo 行为准则。请注意，已解决或处理过的评论可能会被删除。

你需要一个 GitHub 帐户才能在下方发布。没有吗？ 改为在我们的 Odyssey 论坛中发表。