Next를 사용하면 pages폴더가 생성돼서 기본적인 라우팅이나 동적 라우팅을 아주 쉽게 할 수 있었다.
또한 useRouter를 사용해서 이동도 쉬웠던것 같은데..
create-react-app으로 React를 시작해보니, pages폴더가 없고 React에서는 따로 라이브러리를 설치해서 Route를 지정해주어야 한다는 사실을 알게되었다.
그래서 react-router 사용방법에 대해 알아보았다.
사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것, 즉 "페이지 이동"을 라우팅이라 한다.
리액트에서는 리액트 라우터(React Router)
라이브러리를 통해 라우팅을 처리할 수 있다.
📌 react-router 설치
- npm i react-router-dom
- yarn add react-router-dom
react-router 사용방법은 간단하다.
Router
태그로 전체 컴포넌트를 감싸준다.Routes
컴포넌트는 여러 Route를 감싸서 그 중 규칙이 일치하는 라우트 단 하나만을 렌더링 시켜주는 역할을 한다.Route
는 path에 경로, element에 컴포넌트를 작성해준다. 여러 라우팅을 매칭하고 싶은 경우 URL 뒤에 *을 사용하면 된다."*"
는 상단에 위치하는 라우트들의 규칙을 모두 확인 후, 일치하는 라우트가 없는 경우 이동된다. 정의하지 않은 경로로 접속하는 경우에 NotFound 페이지를 보여줄 것이다.URL 파라미터는 위의 사진에서 product/ 뒤에 있는 숫자값을 의미한다.