react路由中的link和navlink

在 React 路由中，`Link` 和 `NavLink` 是用来创建导航链接的组件。

`Link` 组件用于创建基本的导航链接，它会生成一个 HTML `<a>` 标签，当用户点击链接时，React 路由会根据配置的路径进行导航。

使用 `Link` 组件的语法如下：

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

<Link to="/about">About</Link>

上述代码会生成一个指向 "/about" 路径的导航链接。点击链接时，React 路由会渲染与 "/about" 路径相匹配的组件。

`NavLink` 组件是 `Link` 的扩展版本，它可以为当前活动的导航链接添加样式。当与当前路径匹配时，`NavLink` 会自动添加一个指定的 CSS 类名（默认为 "active"），通过这个类名，我们可以为活动链接添加自定义样式。

使用 `NavLink` 组件的语法如下：

import { NavLink } from 'react-router-dom';

<NavLink to="/about" activeClassName="active">About</NavLink>

上述代码会生成一个指向 "/about" 路径的导航链接，并且当与当前路径匹配时，会自动添加 "active" 类名。我们可以利用这个类名来定义活动链接的样式。

总的来说，`Link` 和 `NavLink` 组件都是用来创建导航链接的，它们之间的主要区别是 `NavLink` 可以为当前活动的链接添加样式。使用它们可以方便地实现在 React 应用中进行页面导航。