[react] 라우팅하기...4: useNavigate()

페이지를 이동시킬 때 useNavigate()를 사용할 수 있다.

사실 페이지 자체를 이동시키는 것은 아니고 주소를 지정한 라우터를 찾아간다는 표현이 맞을 듯 싶다.

예를 들어

navigate(”/”)를 호출하면 주소창에서 “/”를 쳐서 이동하는 것과 달리

<Route path = “/” element = {<HomePage/>}></Route>를 찾아가서 지정된 element를 보여주는 것에 가깝다.

react는 원페이지 웹이므로 Route를 사용하는 것을 권장한다.

뒤로 가기

import React from "react";
import { useParams,useNavigate } from "react-router-dom";

function Login(props) { 
    console.log(useParams());
    const { id } = useParams();
    console.log(id);

    const navigate = useNavigate();
    return <div><button onClick={()=>navigate(-1)}>뒤로가기</button>로그인페이지</div>
}
export default Login;

useNavigate객체에 -1을 넘겨주면 뒤로 가기가 가능하다.

페이지 이동하기

import React from "react";
import { useParams,useNavigate } from "react-router-dom";

function Login(props) { 
    console.log(useParams());
    const { id } = useParams();
    console.log(id);

    const navigate = useNavigate();
    return <div>
							<button onClick={()=>navigate(-1)}>뒤로가기</button>
							로그인페이지
							<button onClick={()=>navigate("/")}>홈페이지</button>
						</div>
}
export default Login;

useNavigate객체에 주소를 인자로 넘겨주면 그 주소로 이동한다.