react-router 4中NavLink可加入activeClassName='active'屬性,使得選單在切換時class加入active,可對這個active class寫css style樣式,達到選單切換的效果。
設定成以下,to="/"表示index首頁,但是他都會一只處於active狀態,並不會因為像切換其他的選單而改變。
<NavLink activeClassName='active' to="/">
Home
</NavLink>
加入exact={true}
只需為NavLink指定"exact={true}",它就會按預期工作。
<NavLink exact={true} activeClassName='active' to="/">
Home
</NavLink>
<NavLink activeClassName='active' to="/bout">
About
</NavLink>
相關連結:react-router index route always active