IT/React
[React] react-router-dom (Link , NavLink, Switch)
시린스
2023. 6. 29. 12:49
반응형
※ react-router-dom
- Component를 나누기 위해서 사용한다
1. 보여야되는 component를 Route로 감싼다
2. Path를 통해서 URL이 바뀌는것에 따라서 보여진다.
3. 원하지 않으면 속성에 exact를 추가한다.
EX)
<Route exact path='/'>
<Visual />
</Route>
※ react-router-dom (Link , NavLink)
Link - 기본 링크 기능
NavLink - 기본 링크 기능 + 활성화 기능
☆속성에 to는 필수 값 (path 값임)
※ NavLink
to 속성을 이용하여 Path 설정을 할 수 있다.
activeStyle 속성을 이용하여 선택 되었을 때 style을 변경 할 수 있다.
activeClassName 속성을 이용하여 선택 하면 class를 넣을 수 있다.
※ Switch
- 내부에 중복되는 라우트 경로가 있을 때 더 구체적인 라우터를 채택하고 나머지는 무시