[ React ] React Router DOM Hooks

 

# useNavigate

: 경로를 변경해준다.

import { useNavigate } from "react-router-dom";

const Example = () => {
 let navigate = useNavgate();
 
 navigate('./success', { replace: true } );
}

 

 

# navigate(-1)

: 기존 방문 기록을 기준으로 뒤로 이동 (브라우저 히스토리 활용)

- 사용시 주의점

고객센터 눌렀을때 고객센터>공지사항 경로(/service-center?tab=notice) 를 지정해주지 않고

고객센터((/service-center) 로만 지정해줘서

같은 페이지에서 상태만 변경된 것((/service-center   =>  /service-center?tab=notice)으로 기록되어서

이전 페이지로 이동되지 않았다.

 

# useNavigate()와 useLocation()으로 데이터 주고받기

 

1. useNavigate의 두번째 인자의 state 속성으로 데이터를 보낸다.

2. useLocation 의 state 속성으로 받기

 

navigate(location.pathname, {   //  현재 경로를 나타내는 문자열
    state: {
      userId: user.uid
    },
    replace: true  // 라우팅 동작에 대한 추가 옵션
 }); 

// 페이지를 다시이동 state를 비우고

 

https://jofestudio.tistory.com/66

 

# useLocation

: 현재 위치 객체를 반환한다.

현재 위치가 변경될 때마다 일부 side effect를 수행하려는 경우에 유용할 수 있다.

import { useLocation } from "react-router-dom"

function App () {
  let location = useLocation();
  
  useEffect(()=>{
  ~~
  }, [location])
  
  return (~~)
}

 

 

 

# useParams

: 동적 라우트의 path의 :id 부분이 무엇인지 알려준다.

<Route path="user/:userId" element ={<UserPage />} />


// UserPage
import { useParams } from "react-router-dom"

const UserPage = () => {
  let params = useParams();

  return (
    <p>{params.userId}</p> // path의 userId 가 뭔지 알려준다.
  )
}