useNavigate, Navigate

이거는 네비게이션, 정확히는 경로를 알려준다기 보다는 경로까지 가게 해주는 훅임.

 

import React from 'react'
import { Outlet, useNavigate } from 'react-router'

const Layout = () => {
  const navigate = useNavigate();
  const goBack = ()=>{
    navigate(-1);
  }

  const goArticles = ()=>{
    navigate('/articles', {replace:true});
  }

  return (
    <div>
      <header style={{backgroundColor:'lightgray', padding:16, fontSize:24}}>
        <button onClick={goBack}>뒤로가기</button>
        <button onClick={goArticles}>Articles로 가기</button>
      </header>

      <main>
        <Outlet/>
      </main>
    </div>
  )
}

export default Layout

그냥 훅 가져오고,

저렇게 하면 콜백함수가 들어가나 봄.

navigate(-1) 하면 바로 전, 뒤로 가기임.

 

navigate('경로') 해서 바로 보낼 수도 있음.

이 때, replace라고, 완전히 새로 놓는다는 뜻 인거 같음.

그러니까, 페이지들 돌아다닐 수록 그 로그가 남는데,

그 로그를 (애초에 이게 길 알려주고 경로 아는 네비게이션이니까) 완전히 새로 대체시키는, 네비게이션 자체를 새로 놓는 그런 느낌임.

 

그래서 그냥 뒤로가기 하면 / 로 가게끔 하는 거 같음. 그 전꺼 다 지우고.

 

근데 이게 아예 컴포넌트 그 자체로도 있음.

import React from 'react'
import { Navigate } from 'react-router';

const MyPage = () => {
  const isLoggedIn = false;

  if(!isLoggedIn) {
    return <Navigate to='/login' replace={true}></Navigate>
  }
  
  return (
    <div>MyPage page...</div>
  )
}

export default MyPage

그냥 Navigate 컴포넌트 가져오면 됨.

 

보면 사용법도 똑같음.

to='보낼경로'

하면 되고,

replace도 네비게이션을 새로 교체할 건지, 즉 기존에 로그를 가지고 있던 네비게이션을 새로 교체할 건지.

 

그냥 return 컴포넌트 저렇게 하면 실제로 그냥 바로 가짐. html 요소가 아니라 react-router에서 가져왔듯이 리액트 라우터의 기능임.