210709 React Router
라우터 세팅
Routing(라우팅): 페이지 나누기, react-router-dom
라이브러리 이용
npm install react-router-dom 혹은 yarn react-router-dom
그 다음 index.js로 이동해서
import { BrowserRouter } from 'react-router-dom';
라고 import 해준 다음,
<BrowserRouter>
<App />
</BrowserRouter>
이렇게 BrowserRouter 컴포넌트가 App 컴포넌트를 감싸게 해준다.
-접속하는 url에 따라 다른 페이지를 보여줄 수 있게 됨.
HashRouter: 주소창에 #이 붙음. 좀 더 안전하게 접속가능. #뒤에 적는 것은 서버로 전달 되지 않기 때문이다.
기본 라우팅
페이지를 나누어보자.
요구사항: /detail이라고 치면 상세페이지가 나왔으면 좋겠어요!
<Route path="/">
<div>main page</div>
</Route>
<Route path="/detail">
<div>detail page</div>
</Route>
Route 컴포넌트 안에 이렇게 HTML을 짜면 페이지를 나눌 수 있다.
Route 태그 안에 컴포넌트 하나가 통째로 들어가기도 한다.
<Route path="/detail" `component={컴포넌트명}`>
(아무래도 유지보수를 위해서는 컴포넌트를 필수적으로 사용해야 할 것으로 보임)
✔localhost:3000/
으로 접속하면
✔localhost:3000/detail
로 접속하면
detail page라는 글자가 나오는 것을 볼 수 있음
main page까지 같이 나오는 이유는?
매칭되는 모든 것을 보여주기 때문.
<Routeexact
path="/">라고 적어주자
path가 exactly "/"일 때만 main page를 보여줄 것이다.
주의할점
페이지마다 다른 HTML 파일이 아니다!!index.html
한 파일 안에서
HTML 내부의 내용을 그때그때 빠르게 바꿔 페이지 이동이 일어난 것 처럼 보이는 것.
Author And Source
이 문제에 관하여(210709 React Router), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@autumndr3ams/210709-React-Router저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)