React Router를 이용하여 페이지 이동하기

최대 1 분 소요

내가 기억하려고 정리하는 글

최근 프로젝트에서 웹 프론트를 맡게 되어서 React를 하게 되었다.
React가 처음이었던 내가 헤맸던 부분들을 정리해보고자 한다.

👩🏻‍💻React에서는 페이지 이동을 어떻게 해야할까?

React는 별도로 페이지 이동 기능인 라우팅 기능은 제공하지 않기 때문에
React Router 라는 별도의 라이브러리를 이용해서
페이지 이동을 해야한다!

우선 자신의 프로젝트에 React Router를 설치하자.

npm 기반

$ npm install react-router-dom

yarn 기반

$ yarn add react-router-dom

내 프로젝트를 기반으로하여 설명을 하면
[로그인 / 전체 리스트 / 위험 리스트] 총 3개의 메뉴로 이루어져 있다.

우선 각 메뉴의 페이지를 작성한다.

User.js - 로그인

Care.js - 전체 리스트

Danger.js - 위험 리스트

그리고 index.js 파일에 아래 코드를 추가한다.

마지막으로 App.js 파일에 아래와 같이 router를 설정한다.
아래의 router가 경로와 해당 컴포넌트를 연결해준다.

나는 메뉴를 사이드바로 만들었기 때문에 아래와 같이 코드를 구성하였다.
각자 만든 메뉴에 하이퍼링크로 위에서 설정한 경로를 넣어주면 된다.