728x90
버튼을 클릭하여, 주소가 전환되면서 컴포넌트가 바뀌는 모습을 나타내고 싶었다.
https://react.vlpt.us/basic/07-useState.html→setState 값전환https://velog.io/@chloeelog/React-버튼을-이용해-컴포넌트-전환하기→onClick 컴포넌트전환 (이게 더 맞을듯?)—> 해보니까.. 컴포넌트 전환이라 링크가 변하지 않음.. 아닌듯,,,!? 😂
https://ddeck.tistory.com/23
→ 이게 더 맞는듯!!! 라우터로 전환해야함..!
→링크가 변해야하니까•••!!!!
→ 이것은 리덕스를 사용하는데...???
위는 버튼을 클릭시 컴포넌트가 전환되는 모습을 개발하면서, 참고했던 자료들이다.
위와 같이 해결했을 때, 주소가 바뀌지 않았던 문제와,
리덕스를 사용하여 전환하는 것 외에도 방법이 있을 것 같아서 찾아보았다.
방법은 Link컴포넌트를 사용하는 것이다.
import { Link } from "react-router-dom";위와 같은 코드를 import해주고,
<Link to="./api"> <Button> 거북목 측정하러 가기 </Button> </Link>아래처럼 사용해주면 된다.
이 때, App.js에 Route를 이용하여 /api주소가 되었을 때,
<Route path="/api" element={<Api/>}/>컴포넌트가 바뀐다는 코드를 작성해주어야한다.
즉, /api주소가 같아야함 !
메인 페이지에서, 버튼이 a태그처럼 바뀐 모습을 볼 수 있다.
(a태그처럼 누르기 전, 후의 색상이 바뀌는 모습)
버튼을 클릭하면, 주소도 잘 바뀌는 모습을 확인할 수 있다.
728x90