Published 2021. 3. 3. 20:47
728x90
반응형

react-router-dom

네비게이션을 만들어주는 패키지

SPA앱을 만들 때 많이 사용되는 react-router-dom패키지

 

create-react-app을 이용해 진행

✔ react-router - 웹&앱

✔ react-router-dom - 웹

✔ react-router-native -앱

 


 

react-router-dom 설치

npm에서 설치를 진행

npm i react-router-dom

 

완료되면 App.js에서 import문에 다음을 추가

import React ,{Component} from 'react';
import { BrowserRouter,Route, Link,Switch } from "react-router-dom";

 

import된 BrowserRouter, Route, Link, Switch는

✅ BrowserRouter - history API를 사용해 URL과 UI를 동기화하는 라우터

Route - 컴포넌트의 속성에 설정된 URL과 현재 경로가 일치하면 해당하는 컴포넌트, 함수를 렌더링함

Link - 'a'태그와 비슷합니다. to속성에 설정된 링크로 이동합니다. 기록이 history스택에 저장

Switch - 자식 컴포넌트 Route또는 Redirect중 매치되는 첫 번째 요소를 렌더링합니다. Switch를 사용하면 BrowserRouter만 사용할 때와 다르게 하나의 매칭되는 요소만 렌더링한다는 점을 보장해줌
사용하지 않을 경우 매칭되는 모두를 렌더링

 

 


참고자료 👇

react-router-dom Reference

 

React Router: Declarative Routing for React

Learn once, Route Anywhere

reactrouter.com

 

반응형

'프로그래밍 > React' 카테고리의 다른 글

to do list 만들기_1 (프로젝트 생성 및 초기화)  (0) 2021.03.11
props와 state 개념  (0) 2021.03.04
SPA(Single Page Application)  (0) 2021.03.02
state 활용하기  (0) 2021.02.23
Component Life Cycle  (0) 2021.02.22
복사했습니다!