1. Navbar.js : NavLink 사용
...
import {Link, NavLink} from 'react-router-dom';
...
<li className="nav-item">
{/* activeClassName="active" : 해당 네비게이션의 페이지가 활성화 되어있을 때, NavLink 태그 내의 요소를 강조하도록 하는 효과 */}
<NavLink
className="nav-link"
to="movies"
activeClassName="active"
>
Movies
</NavLink>
</li>
<li className="nav-item">
<NavLink
className="nav-link"
to="/users"
activeClassName="active"
>
Users
</NavLink>
</li>
...
'[ Web ] > React.js' 카테고리의 다른 글
[React.js] Kossie Coder - 24강. 유저 데이터 화면에 출력하기 (0) | 2021.12.29 |
---|---|
[React.js] Kossie Coder - 23강. 유저 데이터 받아오기 (0) | 2021.12.29 |
[React.js] Kossie Coder - 21강. React router 작동 원리 알아보기 (0) | 2021.12.29 |
[React.js] Kossie Coder - 20강. react router 적용하기 (0) | 2021.12.29 |
[React.js] Kossie Coder - 19강. 네비게이션 바 만들기 (0) | 2021.12.29 |