react NavLink和Link

最新推荐文章于 2024-12-28 17:43:11 发布

VanhomPeng

最新推荐文章于 2024-12-28 17:43:11 发布

阅读量440

点赞数

本文链接：https://blog.youkuaiyun.com/qq_37314372/article/details/104800499

版权

本文介绍了React中用于导航的Link组件和增强版的NavLink组件。Link组件的to属性可以接受字符串或对象，用于指定跳转路径。当to为对象时，可以设置pathname属性。此外，还提到了Link的replace属性，它是一个布尔值，用于控制是否替换当前历史记录。NavLink作为Link的增强版，提供了额外的激活样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Link

import { Link } from 'react-router-dom'//引入 Link
<Link to="/home">主页</Link>

其中to后可以是String 也可以是object
to: string
需要跳转到的路径 home。

<Link to="/home">主页</Link>

to: object
需要跳转到的路径 pathname: ‘/home’

<Link to={{
  pathname: '/home',
  search: '?ID=111',
  hash: 'hash',
  state: { noNeedLogin: true }
}}/>

replace：bool

<Link to="/home" replace /> //replace默认为 false。
//当replace为true时，点击链接后将使用home替换掉访问历史记录里面的原地址。
//当replace为false时，点击链接后将在原有访问历史记录的基础上添加/home。

NavLink

NavLink是Link的包装

NavLink 属性介绍：

activeClassName(string)：设置选中样式，不使用activeClassName="classname"时默认使用对应的active样式，相当于使用activeClassName="active"

activeStyle(object)：当元素被选中时，为此元素添加样式
activeStyle(object)用法: activeStyle={{ color: 'green', fontWeight: 'bold' }}

exact(bool)：为true时，有当访问地址严格匹配时class和style才会应用

strict(bool)：为true时，在确定为位置是否与当前URL匹配时，将考虑位置pathname后的斜线

isActive(func)链接激活后做的回调处理。