react NavLink 和 Link 区别

React中的NavLink和Link都是用来创建导航链接的组件。它们的区别在于NavLink可以帮助我们更方便地添加活动类样式（active class），即在当前页面所对应的链接上添加一个自定义的类名，从而让用户知道当前所处的页面。

具体来说，当我们使用NavLink时，它会自动检测当前URL是否与路由匹配，如果匹配，则会添加一个活动类样式。而使用Link时，则需要手动添加活动类样式。另外，NavLink还支持使用自定义的活动类样式名称以及其他一些额外的props。

因此，如果我们需要在导航栏中高亮显示当前所在页面的链接，可以使用NavLink组件；而如果只是单纯地需要创建一个链接，可以使用Link组件。

相关问题

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 应用中进行页面导航。

react router v6navlink

在React Router v6中，`NavLink`已被删除，取而代之的是`Link`组件。`Link`组件用于在应用程序中导航到不同的路由。

要使用`Link`组件进行导航，您需要先安装React Router v6，并在组件中导入它：

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

然后，您可以在需要导航的地方使用`Link`组件。例如，如果您有一个名为`Home`的页面，并且您想要在导航栏中创建一个指向该页面的链接，您可以这样写：

<Link to="/">Home</Link>

在上面的示例中，`to`属性指定了链接的目标路由路径，这里是根路径`/`。

请记住，在使用React Router v6时，其API和写法与v5及以前版本有所不同。如果您之前在React Router v5中使用了`NavLink`组件，请确保查阅React Router v6的文档以了解更多相关信息。