react-router-dom 之 Link 与NavLink-白红宇

react-router-dom 之 Link 与NavLink

阅读量：4112 次

发布时间：2019-05-25

本文共 1006 字，大约阅读时间需要 3 分钟。

本文主要记录react项目react-router的使用,主要介绍两种，Link 和 NavLink

//menuList.js 导航条import { NavLink ,Link} from 'react-router-dom'
   
    {childItem.title}
   //routeConfig.jsimport { Route } from 'react-router-dom'

1、Link

当你点击<Link>时，url会更新，组件会被重新渲染，但是页面不会重新加载，to可以是字符串也可以是对象，to={

{pathname: '/courses',search: '?sort=name',hash: '#the-hash',state: { fromDashboard: true }}

// to为string
   关于 // to为obj
    // replace

2、NaviLink

NavLink

<NavLink>是<Link>的一个特定版本，会在匹配上当前的url的时候给已经渲染的元素添加参数，组件的属性有

activeClassName(string)：设置选中样式，默认值为active

activeStyle(object)：当元素被选中时，为此元素添加样式

exact(bool)：为true时，只有当导致和完全匹配class和style才会应用

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

isActive(func)判断链接是否激活的额外逻辑的功能

嗯、看例子就懂了

// activeClassName选中时样式为selected
   
    FAQs
    // 选中时样式为activeStyle的样式设置
   
    FAQs
    // 当event id为奇数的时候，激活链接const oddEvent = (match, location) => {  if (!match) {    return false  }  const eventID = parseInt(match.params.eventID)  return !isNaN(eventID) && eventID % 2 === 1} 
   
    Event 123

转载地址：http://oemsi.baihongyu.com/

你可能感兴趣的文章