[React] react-router-dom(v5) 의 NavLink

NavLink 컴포넌트

Link컴포넌트처럼 a 태그 역할하지만 만약에 설정한 URL 이 활성화가 되면, 적용할 스타일이나 클래스를 지정 가능하다.
activeStyle: 클릭되었을때 적용될 클래스명
activeClassName: 클릭되었을때 적용될 클래스명

class App extends Component {
  go = () => { this.props.history.go(1);};
  goback = () => { this.props.history.go(-1);};
  goMain = () => { this.props.history.push("/");};

  render() {
    const active = {color: "red"};

    return (
      <div className="wrap">
        <nav>
          <ul>
            <li><NavLink exact={true} activeStyle={active} to="/">Main</NavLink></li>
            <li><NavLink activeStyle={active} to="/axios">AxiosData</NavLink></li>
            <li><NavLink activeStyle={active} to="/text">Text</NavLink></li>
          </ul>
        </nav>

        <Switch>
          <Route path="/axios" component={AxiosData} />
          <Route path="/text" component={Text} />
          <Route path="/" component={Main} />
        </Switch>
      </div>
    );
  }

내가 적용한 방식은 밑에와 같다.

const Navigation = ({location:{pathname}}) => {
    const active = {color: 'white'}
    return (
            <Unlist>
                <List current={pathname==='/write'}><Slink activeStyle={active} to="/write">글쓰기</Slink></List>
                <List current={pathname==='/storage'}><Slink activeStyle={active} to="/storage">서평공간</Slink></List>
                <List current={pathname==='/login'}><Slink activeStyle={active} to="/login">로그인</Slink></List>
                <List current={pathname==='/info'}><Slink activeStyle={active} to="/info">내 정보</Slink></List>
            </Unlist>
    )
}