0502 TIL

React 라우터

#1 useNavigate

• 페이지를 이동시켜 주는 함수
• navigate(2)처럼 안에 숫자넣으면 앞으로가기, 뒤로가기 기능개발 가능
• 페이지를 이동시켜 주는 함수

import { useNavigate } from 'react-router-dom'

function App(){
  let navigate = useNavigate()
  return (
    (생략)
    <button onClick={()=>{ navigate('/detail') }}>이동버튼</button>
  )}

#2 nested routes와 Outlet

• nested routes: 서브경로를 만들 수 있는 라우트로 <Route>안에 <Route>를 삽입하는 것

 <Route path="/about" element={ <About/> } >  
     <Route path="member" element={ <Member/> } />
    <Route path="location" element={ <Location/> } />
 </Route>

• 위 경로처럼 입력하면 About 컴포넌트 안에 Member과 Location 컴포넌트를 보여주기 때문에 Member과 Location컴포넌트가 어디에 위치할지를 Outlet으로 지정해줘야한다.

function About(){
  return (
    <div>
      <h4>about페이지임</h4>
      <Outlet></Outlet>
    </div>
  )
}