# react navlink
###### tags:`react`

[【DAY 26】React-router，其它很有用的組件（上）](https://ithelp.ithome.com.tw/articles/10207306)

NavLink：就是一個Link，一個會有style的Link
activeClassName：string，就是被匹配到的時候，對他增加class name
activeStyle：object，就是被匹配到的時候，對他增加css inline-style樣式
isActive：boolean，利用function來判斷該NavLink是否被匹配到
exact：是否路徑要與網址一模一樣
strict：是否要嚴格判斷結尾斜線

[React Router中Link和NavLink的學習總結](https://codertw.com/%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80/485012/)

import { NavLink } from 'react-router-dom';

<NavLink
                to="/articles"
                activeClassName="selected"
                activeStyle={{
                    fontWeight: 'bold',
                    borderBottom: '2px solid #FBBF24',
                    color: '#FBBF24',
                }}
            >
                <div
                    className="border-b-2 border-yellow-400 w-36 text-yellow-400 text-center
                text-sm sm:text-base py-5 2xs:px-0 px-2.5 min-w-min cursor-pointer"
                >
                    所有文章
                </div>
            </NavLink>