리엑트에서 앵커태그 대신 사용가능한 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
경로로 이동이 가능함