#라우터(Routes, Route) : navigate, nested routes, outlet

1. 먼저, 라우터를 사용하기 위해서 리액트 상단에 import를 해준다.

import { Routes, Route, Link, useNavigate, Outlet } from 'react-router-dom';

 

2. Link 태그를 활용해서 웹페이지를 만들고 싶다면, Link를 열고 onClick API를 활용해서 함수를 열어주고 navigate 안에 경로를 적어주면 된다.

<Nav Link onClick={ ()=> {navigate('/detail'} }>Detail<Nav.Link>

 

3. 기존에 라우터를 활용했을 때에는, Route들을 하나씩 삽입해서 넣는 식으로 활용했었다. 그런데 웹페이지 안에 또 다른 웹페이지를 넣고 싶을 땐 어떻게 해야할까?

<Routes>
	<Route path="/detail" element={<Detail/>} />
</Routes>

--> Route안에 또다른 Route를 생성해주면 된다.

<Routes>
    <Route path="/Detail" element={<Detail/>}>
        <Route path="member" element={<h4>멤버입니다.</h4>} />
    </Route>
</Routes>

 

 

4. 그런데, 막상 /detail/member 홈페이지로 가면 '멤버입니다.' 라는 내용이 보이지 않는다. 이는 Outlet를 활용해준다.

Outlet은 Route하위 또다른 Route의 내용이 어디에 보이게 할지 설정하는 것.

function Detail(){
  return(
    <div>
      <h4>세부사항은 아래와 같습니다.</h4>
      <Outlet></Outlet>
    </div>
  )
}