[문제해결] useLocation - 주소에 따라서 활성화된 메뉴 스타일 변경

메뉴 탭을 클릭할 때마다 다른 주소를 가진 화면으로 이동하도록 구현해놓았다.
여기서 각각의 탭이 활성화 될 때마다 탭의 스타일이 변경되도록 하고 싶다.

이 때 useLocation을 사용할 수 있다. 

  const currentRoute = useLocation().pathname;

useLocation() 객체의 속성 pathname은 현재 url 의 정보를 제공한다.
useLocation().pathname이 제공하는 url 값에 따라 동적으로 스타일 변경시켜주었다.

 

 

import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import { Navbar, Container, Nav } from 'react-bootstrap';

function Navigation(props) {

  const currentRoute = useLocation().pathname;
  
  return (
    <div>
      <Navbar bg='dark' variant='dark'>
        <Container>
          <Nav className='me-auto'>
            <Link
              className={
                currentRoute.endsWith('/')
                  ? 'nav-link navbar-brand'
                  : 'nav-link'
              }
              to='/'
            >
              홈
            </Link>
            {/* <Link className='nav-link' to='/detail'>
              상세페이지
            </Link> */}
            <Link
              className={
                currentRoute.includes('login')
                  ? 'nav-link navbar-brand'
                  : 'nav-link'
              }
              to='/login'
            >
              로그인
            </Link>                  
          </Nav>
        </Container>
      </Navbar>
    </div>
  );
}

export default Navigation;

 

 

 

https://reactrouter.com/docs/en/v6/hooks/use-location