探討Link與NavLink

<Link>:

　　<Link>是一個元素，允許用戶通過單擊或點擊它來導航到另一個頁面，渲染在頁面，我們可以看見它自動轉換成<a href>標簽，並沒有點擊樣式

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

export default class App extends Component {
  render() {
    return (
        <div>
            <Link className="list-group-item" to="/about">About</Link>
            <Link className="list-group-item" to="/home">Home</Link>
        </div>
    )
  }
}

 我們可以看出在頁面中沒有點擊導航高亮顯示效果的

 

<NavLink>:

　　<NavLink>在構建導航菜單時，它會自動顯示當前選擇了哪項菜單，渲染到頁面成<a href>並自動添加了一個active的類名

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

export default class App extends Component {
  render() {
    return (
        <div>
            <NavLink className="list-group-item" to="/about">About</NavLink >
            <NavLink className="list-group-item" to="/home">Home</NavLink >
        </div>
    )
  }
}

我們可以看到在頁面點擊導航高亮顯示效果的

 

修改默認點擊樣式

修改默認的點擊樣式，選中菜單的樣式，例如修改背景色

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

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

而在@6版本，已經棄用了 activeClassName 與 activeStyle

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

如果我們要修改選中樣式，會發現每一個NavLink標簽有太多重復的內容，這時候就可以對NavLink標簽進行二次封裝

在頁面中直接調用我們封裝的NavLink組件

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

<MyNavLink to="/home">Home</MyNavLink>
<MyNavLink to="/about">About</MyNavLink>

在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 (
      <NavLink className={ ({isActive}) => "list-group-item" + (isActive ? " isactive":"")} {...this.props} />
    )
  }
}