React
[React] navigate, nested route, outlet
코릴라입니다
2023. 11. 27. 21:45
navigate
- 페이지 이동 기능 구현을 위해 사용
- Link 태그를 대신해 사용 가능
import { useNavigate } from 'react-router-dom'
function App(){
let navigate = useNavigate()
<button onClick={() => { navigate('/detail') }}>이동버튼</button>
}
- useNavigate 임포트
- useNavigate() 이용해 선언
- navigate( ‘경로’ ) 와 같이 사용
- navigate(-1) : 뒤로 가기
<Route path =”*” element={ Component } />
- 위와 같이 라우터 경로를 지정하면, 따로 지정이 안된 모든 경로에 대해 위 라우터에 지정된 컴포넌트를 출력 → 404 에러 페이지 등에 사용
nested routes, outlet
- 경로 내 경로의 요청에 대해 컴포넌트를 출력하기 위해 사용
- /about/company, /about/employee 등
- 반드시 Outlet을 같이 사용해줘야 화면에 출력시킬 수 있음
<Route path="/about" element ={ <About/> } >
<Route path="company" element ={ <회사소개 /> } />
<Route path="employee" element ={ <직원소개 /> } />
</Route>
- /about 경로 요청에 대해서 About 컴포넌트 출력
- /about/company 경로 요청에 대해서 회사소개 컴포넌트 출력
- /about/employee 경로 요청에 대해서 직원소개 컴포넌트 출력
import { Outlet } from 'react-router-dom'
function About(){
return (
<div>
<h4>about 페이지</h4>
<Outlet/> // About 컴포넌트 내 Outlet을 지정해주면, nested routes들이 해당 위치에서 출력
</div>
)
}
- nested routes의 사용을 위해 해당 컴포넌트 내에 Outlet을 지정해주어야 한다.
반응형