✨ useLocation 사용하기!

url이 고정되어있는 상황에서
어떤 값을 전달하고 싶을때

ex) url은 ‘verify-password’로 고정되어있는 상황.
‘내정보 수정’ 클릭시 verify-password url로 이동하지만 타이틀은 ‘내정보 수정’이었으면 좋겠다.

마찬가지로 ‘비밀번호 변경’ 클릭시 verify-password url로 이동하지만 타이틀은 ‘비밀번호 변경’이었으면 좋겠다.

->

시도 1)

props로 title을 전달하면 된다고 생각했지만
버튼 클릭시 navigate”/verify-password”로 이동할뿐, 컴포넌트를 불러오거나 하지 않기 때문에 props로 전달하는게 난감했다.

(VerifyPassword 컴포넌트는 AccountPage에서 지정해놨기때문에 버튼 클릭시 props를 전달하도록 넣을수가 없었다.)

시도 2)

useParams를 쓸 순 없나? - 없다.
동적 라우팅이 적용되어있는 페이지가 아니라서 useParams를 써도 소용이 없다.

-> ✨ useParams는 동적라우팅이 적용된 페이지에서 사용할 순 있지만,
url이 고정된 정적라우팅 페이지에서는 사용할 수 없다.

시도 3)

버튼 클릭시 navigate와 함께 useLocation으로 status : {title : ‘내정보 수정’} 전달하기!

ex)

• 버튼에서 title 전달하기

<SubmitButton 
  type="button" 
  buttonStyle="white" 
  width="292px" 
  onClick={() => navigate(ROUTE_PATHS.ACCOUNT_VERIFY_PASSWORD, 
                          { state: { title: "내 정보 수정" } })} > 
  내 정보 수정 
</SubmitButton>

• 사용처에서 사용하는 방법

const VerifyPassword: React.FC = () => { 
  const location = useLocation(); 
  const title = location.state?.title || "내 정보 수정"; 
  // 기본값 설정 
  return ( <section className={styles.container}> 
    <h2 className={styles.title}>{title}</h2> 
    <p className={styles.description}> 
      {title}을 위해 비밀번호를 입력해 주세요.
    </p> ... </section> ); };

-> 중요한 점!!
navigate() 괄호 안에 state : { title : “” } 가 들어간다는 점!

참고

뒤로가기 구현 방법!

onClick={() => {
          navigate(-1);
        }}