[Kossie Coder] NavLink 사용하기

// 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 은 수정하지 않았기 때문에 변경 없이 계속 검정색인 것이다.