React useNavigate & Nested Routes & Outlet

useNavigate

useNavigate란 페이지를 이동할 때 사용한다.

useNavigate와 Link의  차이점은 단순히 페이지 이동할 때 사용을 해도 되지만 useNavigate은 특정 이벤트가 

실행이 되었을 때 작동이 되도록 이벤트핸들을 설정할 수 있고 로직이 필요한 상황에서도 사용가능하다.

 

// react-router-dom 라이브러리에서 import로 가져와 사용한다.
import {useNavigate} from 'react-router-dom';

위의 코드를 사용하여 useNavigate를 사용할 수 있도록 한다.,

 

// useNavigate를 변수로 선언한다.
let navigate = useNavigate();

useNavigate 함수를 변수로 선언한다.

 

// 링크가 필요한 부분에 onclick함수를 선언하여 선언된 useNavigate를 사용한다.
<Nav.Link onClick={() => { navigate('/')}}>Home</Nav.Link>
<Nav.Link href="features">Features</Nav.Link>
<Nav.Link onClick={() => { navigate('/detail')}}>Detail</Nav.Link>

useNavigate 함수속 인자에 경로를 넣어 클릭이벤트로 인자에 들어간 경로로 이동한다.

useNavigate 속 인자로 1 또는 -1을 넣을수 있다.

양수는 앞으로가기, 음수는 뒤로가기로, 숫자는 횟수에 따라 앞으로 가거나 뒤로 갈 횟수를 정할 수 있다.

 

 

Route의 path경로가 *(에스터리스크)로 선언되었을때

Route의 없는 경로로 접속하게되면 path가 *로 된 태그를 보여준다.

// path를 *로 선언한다.
<Route path="*" element={<div>Not found 404</div>} />

 

경로가 없는 주소로 접속되면 *로 선언된 Route 요소를 보여준다.

 

 

 

반응형

 

 

 

Nested Routes

Nested Routes(중첩 라우트)란 Route 들을 다른 Route 태그속에 감싸아서 자식으로 감싸진 Route태그의 path는

부모의 Route 태그 path 뒤에 붙여서 사용한다.

 

// 부모 Route의 path를 이어받아 사용할수있다.
<Route path="/about" element={<About />}> // path: /about
  <Route path="member" element={<div>Member</div>} /> // path: /about/member
  <Route path="location" element={<div>Location</div>} /> // path: /about.location
</Route>

 

부모 Rout 태그속 path경로를 보여준다.

 

부모 Route 태그의 path를 이어받아 자식 Route 태그의 path를 붙여 경로를 만들어 이동한다.

 

 

 

 

 

 

Outlet

Outlet 이란 Nested Routes 의 자식 Route의 요소들을 렌더링하기 위해 부모 Route요소 속에 사용하는 태그이다.

부모 Route 태그의 경로가 일치하면 자식 Route의 경로를 랜더링해주고 경로가 없으면 아무것도 렌더링 하지않는다.

 

// 부모 Route의 요소를 함수로 선언
function About() {
  return (
    <div>
      <h4>About Company</h4>
      <Outlet></Outlet>	// Outlet 태그속에 자식 Route 요소태그가 들어간다.
    </div>
  )
}

 

<Route path="/about" element={<About />}> // 부모 Route 사용
	// 자식 Route의 element가 Outlet 태그로 들어간다.
  <Route path="member" element={<div>Member</div>} />	
  <Route path="location" element={<div>Location</div>} />
</Route>