Link

to : url
state : props 전달

사용방법

1. 부모태그에서 props로 state를 지정한다.
2. 자식태그에서 useLocation()을 이용하여 받아 사용한다.

간단한 예시

• 부모

<Link
  to='/onboarding/profile'
  state={{ from: 'occupation' }}
>
  Next Step
</Link>

• 자식

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

function Profile () {
  const location = useLocation()
  const { from } = location.state

  return (
    ...
  )
}

이를 통해 props를 받아 사용할 수 있다.

추가내용 (주의)

<Link to='/onboarding/profile' state={{ from: 'occupation' }} 로 할 경우
해당 버튼을 누르는 url이 만약 http://localhost:3000/wishes/1라면
http://localhost:3000/onboarding/profile로 이동한다.

<Link to='onboarding/profile' state={{ from: 'occupation' }} 로 할 경우
해당 버튼을 누르는 url이 만약 http://localhost:3000/wishes/1라면
http://localhost:3000/wishes/1/onboarding/profile로 이동한다.

출처

Link