9. 导航到课程页面
3m

👉 连接两个页面

我们的课程页面已经准备好了，但如果我们没有手动在浏览器的地址栏中输入正确的路径和课程 ID，我们就无法访问它。现在该从首页导航到课程页面了。

这将发生在课程卡片本身。让我们打开track-card.js 文件位于 client/src/containers 中。

我们正在使用React Router 来实现路由，所以让我们在顶部导入它们的 Link 组件。

import { Link } from "react-router-dom";

我们需要将 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 lab 来迎接挑战。

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

上一步

分享您对本课的疑问和意见

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

您需要一个 GitHub 帐户才能在下面发布。没有？ 改在我们的 Odyssey 论坛上发布。