[008] 리액트 (React) 배우기 - Router (라우터 사용)

2023. 2. 28. 14:59프론트엔드개발/React

반응형

안녕하세요~ totally 개발자입니다.

 

Router

 

오늘 살펴볼 부분은 Router입니다. 라우터란 여러 페이지가 있을 때 각 페이지로 갈 수 있도록 도와주는 기능입니다. Main.js, About.js, Contact.js 3개의 컴포넌트가 있을 때 이 3개의 페이지(컴포넌트)로 라우팅해보도록 하겠습니다.

 

Step 1: 먼저 component 폴더 내에 About.js, Contact.js, Main.js 파일을 각각 만들어줍니다.

 

About.js

 

Contact.js

 

Main.js

 

Step 2: App.js에 다음처럼 입력해줍니다. 중요한 것은 <BrowserRouter> 태그로 감싸주신 뒤 <Routes></Routes> 안에 각 <Route> 태그를 만들어주셔서 path와 element 부분에 함수 이름을 지정하면 됩니다.

 

 

 

Step 3: 만약에 react-router-dom이 설치되어 있지 않다면 Terminal 열어주셔서 sudo npm install react-router-dom 입력 후 설치하시면 됩니다.

 

 

Step 4: npm run start 해주셔서 실행해본 모습입니다. 아직 링크 메뉴 버튼을 만들지 않았기 때문에 수동으로 주소창에 /about, /contact를 입력해서 테스트해보시면 됩니다.

 

 

반응형