探讨Link与NavLink

import React, { Component } from 'react'
import { Link } from 'react-router-dom'

export default class App extends Component {
  render() {
    return (
        

            "list-group-item" to="/about">About
            "list-group-item" to="/home">Home
        

    )
  }
}

 我们可以看出在页面中没有点击导航高亮显示效果的

:

import React, { Component } from 'react'
import { NavLink } from 'react-router-dom'

export default class App extends Component {
  render() {
    return (
        

            "list-group-item" to="/about">About
            "list-group-item" to="/home">Home
        

    )
  }
}

我们可以看到在页面点击导航高亮显示效果的

修改默认点击样式

修改默认的点击样式，选中菜单的样式，例如修改背景色

在react-router-dom@6版本以前，例如5.xx版本

activeClassName="isactive" className="list-group-item" to="/about">About
// 或者
activeStyle={{ background: "green" }} className="list-group-item" to="/home">Home

而在@6版本，已经弃用了 activeClassName 与 activeStyle

className={ ({ isActive }) => "list-group-item" + (isActive ? " isactive":"")} to="/about">About
// 或者
style={({ isActive }) => ({ color: isActive ? 'green' : 'blue' })} to="/home">Home

如果我们要修改选中样式，会发现每一个NavLink标签有太多重复的内容，这时候就可以对NavLink标签进行二次封装

在页面中直接调用我们封装的NavLink组件

// 封装的NavLink
import MyNavLink from './components/MyNavLink'

"/home">Home
"/about">About

在src/components/MyNavLink

在封装的NavLink组件中，打印传递过来的props,可以发现标签中的，内容直接以children存在props中

import React, { Component } from 'react'
import { NavLink } from 'react-router-dom'

export default class MyNavLink extends Component {
  render() {
    console.log(this.props);
    return (
       "list-group-item" + (isActive ? " isactive":"")} {...this.props} />
    )
  }
}