react-router-dom (8) 부가기능 NavLink

NavLink

- Link와 비슷

- 현재 경로와 Link에서 사용하는 경로가 일치하는 경우

특정 스타일 혹은 CSS 클래스를 적용할 수 있는 컴포넌트

 

 

NavLink에서 링크가 활성화 되었을 때,

스타일을 적용할 때는 activeStyle 값을

CSS 클래스를 적용할 때는 activeClassName 값을

props로 넣어 주면 된다.

 

 

 

 

Profiles에서 사용하고 있는 컴포넌트에서 Link 대신 NavLink를 사용

현재 선택되어 있는 경우 검정색 배경에 흰색 글씨 적용

 

 

 

Profiles.js

import React from "react";
import { NavLink, Route } from "react-router-dom";
import Profile from "./Profile";

const Profiles = () => {

  const activeStyle = {
    background:'black',
    color:'white',
  };

  return (
    <div>
      <h3>User List</h3>
      <ul>
        <li>
          <NavLink to="/profiles/yumcoding" activeStyle={activeStyle}>yumcoding</NavLink>
        </li>
        <li>
          <NavLink to="/profiles/myfav" activeStyle={activeStyle}>MyFav</NavLink>
        </li>
      </ul>
      <Route path="/profiles" exact render={() => <div>Choose an User</div>} />
      <Route path="/profiles/:username" component={Profile} />
    </div>
  );
};

export default Profiles;

 

 

 

 

 

 

 

 

출처

김민준, 리액트를 다루는 기술 개정판, 2019년, 350-351페이지