[React] Link 태그에서 relative프퍼티

qwe8851·2023년 5월 28일
0

💎 React

목록 보기
30/37

리엑트에서 앵커태그 대신 사용가능한 Link태그가 있음
a태그를 사용하면 http요청으로인해 url이 변경되면서 새로고침이 발생하는데
리엑트라우터돔에서 제공하는 Link component를 사용하면 http요청없이 라우팅이 가능함

<Link to="/products/id">product details</Link>

이런식으로 사용가능한데
이전 경로로 이동하는 버튼을 만들어서 사용하고싶은거임

<button>
	<Link to="..">Back</Link>
</button>

그래서 디테일 페이지에서 Back버튼을 생성해서 터미널에서도 자주 사용하는 ..을 경로로 줬더니
예상동작과는 다르게 동작함.

내 예상으로는 products페이지에서 디테일페이지(/products/id)로 이동했으니
디테일페이지(/products/id)에서 ..을 하면 /products로 이동할거라고 생각했음
그른디 root경로로 이동하는거임

이럴때 사용가능한 relative프로퍼티가 있음
relative프로퍼티를 활용하면 상대 경로로 링크를 설정할 수 있음

<button>
	<Link to=".." relative="path">Back</Link>
</button>

to프로퍼티에는 기존과 동일하게 ..을 설정했고 relative프로퍼티는 "path"로 설정했음 (기본값: route)
이는 현재 경로에서 한 세그먼트만 제거해서 이전 경로로 이동하도록 지정하는것임.

따라서 내가 바라는데로 /products/id에 붙은 한 세그먼트(id)만 제거되어 /products경로로 이동이 가능함

profile
FrontEnd Developer with Vue.js, TypeScript

0개의 댓글