在网页内容里插入链接可以使用 HTML 的 a 标签，打开 About 这个组件，在组件的显示这里再添加一个链接，一组 div，然后里面包装的是一个 a 标签，用 href 设置一下链接的位置，设置成 / ，表示应用的首页，链接文字是 ← 回到首页。

在浏览器上测试一下，在关于这个页面，点击这个回到首页，会打开应用的首页，不过现在这个链接直接用的是 a 标签，所以打开链接地址的时候，页面会刷新。

在使用了 React Router 的 React 应用里，如果需要链向路由地址的链接，需要使用 React Router 提供的 Link 这个组件。在这个链接用的 a 标签换成 Link，编辑器会帮我们从 react-router-dom 里导入需要的 Link。然后把 href 属性换成 to 属性，它的值就是路由地址。

再到浏览器测试一下，点击回到首页这个链接，这次回到首页的时候没有刷新页面。虽然这个链接同样使用的是 HTML 的 a 标签添加的，但是这次跳转链接的时候是由 React Router 接管的。

app-header

在应用的头部这里我们可以再添加两个链接，打开 app-header 这个组件。

先让这个应用的名字链接到应用的首页，这里可以使用一个特别版的 Link，名字是 NavLink，用一组 NavLink 包装一下应用的名字，把 to 属性的值成 / 。

然后再添加一组 nav 标签，在里面添加一组 NavLink 组件 。链接文字是 关于，to 属性的值设置成 /about。

在浏览器测试一下，点击关于，访问的地址是 /about，界面上会显示 About 组件，检查一下这个链接元素，你会发现，这个 a 标签上面会有一个额外的 active 类，因为这个链接的地址匹配当前正在访问的地址。

在应用的样式表里我们可以利用这个 .active 类去给当前激活状态下的链接添加点额外的样式。

app.css

新建一个样式表，放在 app 目录的下面，名字是 app.css ，然后打开 app 这个组件，在文件顶部导入刚才创建的样式表，位置是当前目录下面的 app.css。

打开 app.css 这个样式表，先设置一下 a 元素的样式，把 color 设置成 black，再把 text-decoration 设置成 none。然后设置一下 a.active 的样式，把 font-weight 设置成 bold。

然后在浏览器预览一下，现在页头这里显示的 关于 这个链接，会加粗显示，颜色是黑色，点击应用的名字，访问应用的首页，关于这个链接的样式又会恢复到默认的状态，因为当前访问的地址是应用的首页，所以关于这个链接元素上就不会再有 .active 这个类了。