react NavLink和Link

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)链接激活后做的回调处理。

你可能感兴趣的:(react NavLink和Link)