[React] useNavigate() 설명, 404 페이지 만드는 법, nested routes, outlet

페이지 이동기능을 <Link/> 컴포넌트 대신 useNavigate() 훅을 사용할 수 있다.

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

-> navigate(-1) = 뒤로 1번 가기, 2 넣으면 앞으로 2번 가기도 가능하다.

---

 

404 페이지

      <Routes>
        <Route path='/' element={<Main/>} />
        <Route path='/detail' element={<Detail/>} />
        <Route path='*' element={<div>없는페이지</div>}/>
      </Routes>

-> <Route/>의 path에 *을 넣으면, 모든 경로를 뜻한다.

-> 위 Route 경로 이외의 경로를 들어간다면 element 요소를 보여준다.

 

---

서브경로 만들 수 있는 nested routes

 

/about/member로 접속하면 회사멤버 소개하는 페이지

/about/location으로 접속하면 회사위치 소개하는 페이지를 만들고 싶을 때,

 

<Route path="/about/member" element={ <div>멤버들</div> } />
<Route path="/about/location" element={ <div>회사위치</div> } />

-> 이렇게 해도 되겠지만,

 

<Route path="/about" element={ <About/> } >  
  <Route path="member" element={ <div>멤버들</div> } />
  <Route path="location" element={ <div>회사위치</div> } />
</Route>

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

-> 이렇게 만들어도 된다.

-> 이렇게 해두면 /about/member 접속 시 <Outlet>자리에 <div>멤버들</div> 들이 보인다.

-> 유사한 서브페이지가 많이 존재한다면 이렇게 만들어도 된다.