S1: React-Router로 트위터 페이지

설치 : npm install react-router-dom

 

react-router 구성

Router 구성

1. APP.js 구성

react-router-dom에서 BrowseRouter, Route, Switch를 불러와 import한다. BrowserRouter 태그 내부에서 Switch를 통해 Route태그의 실제 경로가 path것들에서 Tweets, About, Mypage 컴포넌트를 스위칭하며 나타낸다. 

이 과정을 통해 Route에 연결된 path주소에 해당하는 컴포넌트를 연결한다.

* BrowserRouter 태그를 app.js에서 사용하지 않고 index.js에서 선언/사용 할수도 있다.

browserRouter를 index.js에 선언하기

 

2. Sidebar.js 설정

사이드바에 있는 각 버튼을 누를시 컴포넌트가 이동하도록 각 버튼마다 Link를 달아서 누를시 해당 주소로 이동하게 만든다. 

* a태그와 비슷한 Link는 a태그와 달리 페이지를 새로 가져오지 않는다.

 

 

3. NavLink 사용하기

 

NavLink로 해당 요소에 즉시적용 되는 style이나 요소를 추가할 수 있다.