1. Router란 무엇인가?
앱 또는 웹에서 작성되는 페이지들은 근간이 되는 페이지의 URL 경로 이름을 공통적으로 가지고 있다.
Router는 앱의 다른 부분들을 서로 연결하는 기능을 제공한다.
즉 어떤 페이지를 근간으로 하는 페이지들을 서로 연결하거나 버튼을 클릭하면 이동하는 것이 가능하다.
부분적으로 랜더링 되는 부분 또는 여러 경로로 유입될 수 있는 경우 유용하게 사용될 수 있다.
2. Route로 페이지 이동
1) Router를 선언한다.
BrowserRouter, Routes, Route를 순서대로 선언한다.
Route path는 근간이 되는 페이지의 URL 경로 이름 뒤에 올 수 있는 주소에 해당된다.
이 주소는 대소문자를 구분하지 않는다.
2) App.jsx에 선언하여 생성한 Router가 전역적으로 기능할 수 있게 한다.
3) 버튼을 클릭할 때 Home으로 이동하는 컴포넌트를 만들고 싶었다.
버튼을 하나 생성하고, onClick을 할당한다.
위치 이동은 useNavigate hook을 사용하였다.
navigate가 입력한 주소값 /가 Home을 가르키므로 버튼을 누르면 Home으로 이동한다.
4) navigate를 응용하여 숫자를 입력했을 때 원하는 숫자면 페이지가 이동하는 로직을 만들었다.
종이로 게임하는 것 중에서 페이지 이동을 하며 놀던 것이 있었는데, 이 기능을 이용하면 재밌을 것 같다.
다만 event를 바로 적용하는것이 아니라 setNumber로 넣은 후 적용하려고 하면 오류가 발생한다.
원하는 숫자를 넣어도 잘못된 페이지로 이동하게 된다.
참고한 문서
Router v6.21.3 | React Router
Type declarationdeclare function Router( props: RouterProps ): React.ReactElement | null; interface RouterProps { basename?: string; children?: React.ReactNode; location: Partial | string; navigationType?: NavigationType; navigator: Navigator; static?: boo
reactrouter.com