[React] 라우터 설치 및 사용(react router dom)

매 프로젝트 때마다 라우터를 사용하는데, 이번에도 라우터를 설치하여 사용하게 될 일이 있어 추후에 기억이 나지 않는 경우를 대비해 글을 적어보았다.

1. cmd창에 npm i react-router-dom 입력하여 install

2. src 경로에 있는 App.js를 Router.js로 변환

이후에 <BrowserRouter> 혹은 <HashRouter>을 사용할 수 있는데, 해당 글에서는 HashRouter을 사용하겠음.

3. Router 설정

위 사진처럼 react-router-dom에서 HashRouter, Routes, Route import해줌

이렇게 작성해두되, Route에는 path와 element값을 넣어줌

header의 경우, 매 페이지 상단에 놓고싶다면 Routes태그보다 위로 위치시켜두고
footer의 경우, 위 이미지처럼 Routes의 하단에 위치.

4. index.js도 수정해주기

이후에 경로 연결이 잘 되어있는지 확인하면 끝!!!