일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- debouncing
- 리액트
- es6
- twoarrow
- CustomHook
- ignore padding
- useQueryClient
- react
- Carousel
- 조건부스타일
- tailwindCSS
- vite
- ㅡ
- alias설정
- 문제해결
- QueryClient
- 함수형프로그래밍
- 부모패딩
- ?? #null병합연산자
- parent padding
- DOM
- createPortal
- 부모요소의 패딩 무시
- BFC
- BlockFormattingContext
- 화살표2개
- 제어컴포넌트
- accordian
- transition
- 서초구보건소 #무료CPR교육
Archives
- Today
- Total
프론트엔드 첫걸음
[문제해결] 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;
'개발 공부 > React' 카테고리의 다른 글
성능개선 - react.memo로 불필요한 재평가 방지하기 (0) | 2022.08.04 |
---|---|
객체 타입의 prop 전개연산자로 전달하기 (0) | 2022.07.30 |
useImperativeHandle 과 forwardRef (0) | 2022.07.27 |
리액트 Hook 규칙 (0) | 2022.07.26 |
useEffect - 2. clean up 함수 (0) | 2022.07.25 |