useNavigate & Nested Routes

---

어쩌면 Link 보다 편한 useNavigate

• Link 컴포넌트
  라우팅을 할때 경로를 연결해주는 역할을 하는 컴포넌트이다.
  링크 컴포넌트를 클릭하게 되면 연결해 놓은 컴포넌트를 보여줌

Link 컴포넌트 말고 useNavigate 컴포넌트를 사용해도 Link 와 동일한 기능을 사용할 수 있다.

사용하기 앞서 리액트 라우터 돔을 설치하고 상단에 아래와 같이 작성하고 사용할 컴포넌트 내부에서 변수에 할당해준다.
useNavigate 컴포넌트를 사용할 요소에 클릭 이벤트를 부착한 후 콜백함수 내부에서 호출해준다.

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

function App() {
  let navigate = useNavigate()

  return (
      <Nav.Link onClick={()=>{navigate('/')}}>HOME</Nav.Link>
     <Nav.Link onClick={()=>{navigate('/cart')}} >CART </Nav.Link>
  
)
}

useNavigate()를 할당받은 변수를 호출하는데 인자로 Link 컴포넌트에서 사용했던 경로를 작성해주면 된다.

만약 숫자를 넣게 되면 앞으로가기/ 뒤로가기 버튼을 구현할 수 있다..!

• 앞으로가기
  navigate(1) 한 페이지 앞으로 감

• 뒤로가기
  navigate(-1) 한 페이지 뒤로 감

---

Nested Routes

Nested Routes 는 서브경로를 간편하게 설정해줄 수 있는 기능이다.

 <Routes>
        {/* Nested Routes 로 작성 시   */}
   <Route path='/event' element={<Event/>}>
      <Route path='one' element={<div> 첫 주문시 양배추즙 서비스</div>}/>
      <Route path='two' element={<div>생일기념 쿠폰받기</div>}/>
   </Route>

            {/* 그냥 일반 Route로 작성 시  */}
  <Route path='/event' element={<Event/>}/>
  <Route path='/event/one' element={<div>첫 주문시 양배추즙 서비스</div>}/>
  <Route path='/event/two' element={<div>생일기념 쿠폰받기</div>}/>
</Routes>

Nested Routes 의 장점

• Route 작성이 간단해질 수 있다.
• 서브 경로로 이동시 두개의 컴포넌트를 보여줄 수 있다.

예를들어 http://localhost:3000/event/two 으로 이동하게 되면
/event 컴포넌트와 /two 컴포넌트 두개의 컴포넌트를 동시에 보여준다.

단 저렇게 서브 경로를 보여주게 하기 위해선
/event 컴포넌트 내에서 서브 경로를 어디에 보여줄 지 정해야한다.

function Event (){
  return (
    <>
    <h1>오늘의 이벤트</h1>
    <Outlet></Outlet>  🔥
    </>
  )
}

위의 코드를 보면 Event 컴포넌트 내에서 <Outlet> 가 작성된 것이 보일 것이다.
<Outlet> 의 역할은 그냥 서브 경로의 위치를 지정해주는 녀석이라고 생각하면 된다..!

Nested Routes 는 위에서 본 것처럼 유사한 서브페이지가 많이 필요한 경우에 유용하게 사용할 수 있을거 같다.! 😎