30 React Router简介之使用Link和NavLink

在上一篇中，我们讨论了如何创建路由与导航。在这一章节中，我们将深入了解如何在 React 应用中使用 Link 和 NavLink 组件来实现导航功能。这两个组件是使用 React Router 进行导航的关键工具，它们能够帮助用户在应用的不同页面之间进行切换，而无需重新加载整个页面。

1. Link组件的使用

Link 组件用于在应用的不同组件之间进行导航。它生成一个可点击的链接，用户点击后会让应用转到另一个路径。

使用示例

首先，请确保你已经在项目中安装了 react-router-dom。可以通过以下命令安装：

npm install react-router-dom

接下来，我们可以创建一个简单的应用，在其中使用 Link 组件。

import React from 'react';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';

const Home = () => <h2>首页</h2>;
const About = () => <h2>关于我们</h2>;

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">首页</Link>
          </li>
          <li>
            <Link to="/about">关于我们</Link>
          </li>
        </ul>
      </nav>

      <Switch>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

在这个例子中，我们首先导入了 Link 和 Route 组件。Link 组件的 to 属性指定了链接的路径。点击这个链接时，Home 或 About 组件会被渲染到页面中。

2. NavLink组件的使用

NavLink 组件与 Link 相似，但提供了更强大的功能，包括激活样式的支持。它使我们能够在用户导航到特定路由时，自动应用样式。

使用示例

我们可以使用 NavLink 为当前激活的链接添加样式，具体如下：

import React from 'react';
import { BrowserRouter as Router, Route, NavLink, Switch } from 'react-router-dom';

const Home = () => <h2>首页</h2>;
const About = () => <h2>关于我们</h2>;

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <NavLink to="/" exact activeClassName="active">首页</NavLink>
          </li>
          <li>
            <NavLink to="/about" activeClassName="active">关于我们</NavLink>
          </li>
        </ul>
      </nav>

      <Switch>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

在这个例子中，我们使用 NavLink 代替 Link。NavLink 的 activeClassName 属性允许我们指定一种样式，当链接指向的路径匹配当前页面时，这种样式将被添加。例如，我们可以使用 CSS 来定义 .active 类。

.active {
  font-weight: bold;
  color: blue;
}

这样，在用户浏览到相应的路径时，NavLink 会被赋予 .active 类，从而改变其样式。

3. 小结

在这一节中，我们了解了 Link 和 NavLink 组件的基本用法。Link 用于创建简单的页面链接，而 NavLink 则提供了激活状态的样式处理。通过这些组件，我们能够构建出具有良好用户体验的单页应用。

接下来，我们将深入探讨 React 中的 Hooks 使用，特别是 useState 和 useEffect 的介绍。这些 Hooks 将使我们在组件中管理状态和副作用变得更加高效。