[프론트엔드] react router v6 NavLink

이전 글

• 2022.03.21 - [분류 전체보기] - [프론트앤드] react router v6 NavLink

 

 

 

1.  NavLink  사용 예제

 

- Profiles.js

 

 

v6 버전에서 NavLink 사용 방법은 동일하나 activeStyle, activeClassName 속성이  삭제되었다.

 

따라서 아래와 같이  NavLink 태그안에 isActive를 선언하여 활성화시키고 싶은 스타일에 css를 적용 할 수 있다.
(클릭/활성화 시  active class 변경됨)

 

 

 

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

const Profiles = () => {
    return (
        <div>
            <h3>사용자 목록</h3>
            <ul>
                <li>
                    <NavLink to="/profiles/ycLee" style={({ isActive }) => ({ color: isActive ? 'black' : 'yellow' })}>ycLee</NavLink>
                </li>
                <li>
                <   NavLink to="/profiles/gildong" className={({ isActive }) => "nav-link" + (isActive ? " activated" : "")}>gildong</NavLink>
                </li>
            </ul>
            <Routes>
                <Route path="/*" element={<div>유저를 선택해주세요.</div>} />
                <Route path=":username" element={<Profile />} />
            </Routes>
        </div>
    )
}

export default Profiles;

 

2.  화면  결과

 

 

- 활성화된 사용자의 class 요소가 active로 변경/컬러가 black으로 바뀜

 

 

 

2. 최종 소스 

 

 

GitHub - S-YC/ROUTER-TUTORIAL: 라우터 튜토리얼 공부