경로에 따라 동적으로 텍스트와 이벤트 변경하기

지금까지 학습했던 내용으로 Router를 적용한 TodoList를 만들어보려고 합니다.

 

 

MyTodo 페이지로 이동했을 때도 nav 버튼이 MyTodo인 것이 불편해서 Home으로 바꿔주려 합니다.

그렇다면 경로에 따라 처리를 해봅시다.

 

const location = useLocation();

console.log(location.pathname);

 

 

 

경로가 제대로 출력되는 것을 볼 수 있습니다.

 

const btnText = () => {
    if (location.pathname === '/') {
        return 'MyTodo'
    }
    if (location.pathname === '/mypage') {
        return 'Home'
    }
}

const handleNav = () => {
    if (location.pathname === '/') {
        navigate('/mypage');
    }
    if (location.pathname === '/mypage') {
        navigate('/');
    }
};

 

경로에 따라 이벤트와 텍스트를 변경해주면

 

현재 경로에 따라 자연스럽게 바뀌는 버튼을 확인하실 수 있습니다~