WIL 4주차 정리

오늘은 4주차 금요일이 마무리 되면서 React 프로젝트를 완성시키기 위한 공부단계에서 배운 라우터 부분을 다뤄보자

 

처음에는 라우터폴더를 나눠서 폴더 관리를 해준뒤에 안에 Router를 만들고 최상위인 App.jsx에 Router를 import 해오고 컴포넌트를 반환해줍니다.

 

아래 이미지는 Route.js 파일안에 로직입니다. 기본적으로 터미널에서 React-Router-Dom을 깔아야 합니다. 그리고 Route 파일에서 React-Router-Dom 을 import 해온뒤 밑에와 같이 Route 부분을 Routes로 감싸준뒤 Route 태그에 path로 어느 주소로 이동할건지 적어준 뒤 불러 올 컴포넌트를 element안에 넣어줍니다. 이렇게 하면 첫 화면에 path="/" 로 해준부분이 첫 화면으로 나오고 해당하는 path로 이동할 때 마다 해당하는 컴포넌트를 불러옵니다.

 

 

아 중요한 설명을 까먹었습니다. 아래 사진처럼 index.js 에서 BrowserRouter를 import 한 뒤 App 컴포넌트를 감싸 주어야 작동합니다.

 

참고로 제가 다룬 React-Router-Dom은 v6버전 기준입니다. v5에서는 사용방법이 조금 다릅니다.

 

참고 사이트 React-Router-Dom