// NavBar.js
import React from 'react';
import { Link, 🌟NavLink🌟 } from 'react-router-dom';
const Navbar = () => {
return (
<nav className="navbar navbar-expand-sm navbar-light bg-light">
<Link className="navbar-brand" to="/">
Home
</Link>
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav">
<li className="nav-item">
<🌟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>
</ul>
</div>
</nav>
);
};
export default Navbar;
Movies 와 Users 를 눌렀을 때 색이 변하는 것을 볼 수 있다.
Home 은 수정하지 않았기 때문에 변경 없이 계속 검정색인 것이다.
'React > Lecture' 카테고리의 다른 글
[Kossie Coder] 로딩 Spinner 추가하기 (0) | 2022.01.15 |
---|---|
[Kossie Coder] axios (0) | 2022.01.15 |
[Kossie Coder] react router Switch, exact 속성 (0) | 2022.01.14 |
[Kossie Coder] react router 설치 (0) | 2022.01.14 |
[Kossie Coder] InputField 컴포넌트로 빼내기 (0) | 2022.01.14 |