React-router - NavLink

ReactJS - NavLink

• sorce code는 이전 문서에서 재활용한다.
• /...../ 는 생략되었다는 표시임
• 파란 글씨는 추가된 것임
• 빨간 글씨는 수정된 것임

각 루트 라우터의 상태에 따라  각각의 다른 스타일 주기

~cra-router/src/components$Header.css

/....../

.item:active, .item.active {

    background: white;

    color: #5c7cfa;

}

~cra-router/src/components$Header.css

import React from 'react';

import { NavLink } from 'react-router-dom';

import './Header.css';

const Header = () => {

    return (

        <div className="header">

            <NavLink exact to="/" className="item" activeClassName="active">홈</NavLink>

            <NavLink to="/about/boolean" className="item" activeClassName="active">소개</NavLink>

            <NavLink to="/posts" className="item" activeClassName="active">포스트</NavLink>

        </div>

    );

};

export default Header;

<NavLink exact to="/" className="item" activeClassName="active">홈</NavLink>에서의 "exact"는 "/"의 이상 고정 지정현상을 제거 해준다. 빼고 해보고 넣고도 해보자.

Previous Page

Next Page