리액트 라우터 적용해보는 레시피

리액트 라우터 적용 레시피

1. 라우터를 설치한다. npm install react-router-dom

2. BrowserRouter로 App.js의 컴포넌트 전체를 감싼다.

3. url에 따라 각각 다른 페이지로 보여주고 싶은 컴포넌트들을 Switch로 감싼다.

   • Switch 외부에 있는 컴포넌트는 모든 페이지에 공통으로 노출된다.

4. Switch 안의 컴포넌트들을 원하는 주소(path="/...")에 따라 각각 Route로 감싼다.

   • 다만 Switch로 감싸진 컴포넌트들 중에 주소가 일치하는 컴포넌트가 여러 개 있으면 그것들 중에서 제일 첫 컴포넌트를 보여준다.

5. Route의 path="/..."에 경로를 넣는데, 메인 페이지는 "/". 주소의 파라미터에 따라 '다이나믹하게' 다른 페이지들을 보여주고 싶으면 "/:변수" (예: "/pages/:id")

   • "/:변수"에서 '변수'의 값은 해당 Route로 감싸진 컴포넌트에서 useParam()으로 받을 수 있다. 예) const id = useParam().id; 또는 const { id } = useParam();

6. 일반 html에서는 a태그로 감싸서 링크를 나타낸다면, 리액트 라우터에서는 Link 태그로 감싼다.

   <Link to="/about">About</Link>