728x90
https://homzzang.com/b/js-1381
https://velog.io/@kwonh/React-react-router-dom-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0
[React] react-router-dom 시작하기
안녕하세요이번 포스팅은 SPA앱을 만들 때 많이 사용되는 react-router-dom패키지에 대해 알아보겠습니다.create-react-app을 이용해 진행했습니다.react-router - 웹&앱react-router-dom - 웹react-router-native
velog.io
완료되면 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만 사용할 때와 다르게 하나의 매칭되는 요소만 렌더링한다는 점을 보장해줍니다.
사용하지 않을 경우 매칭되는 모두를 렌더링합니다.
728x90
'프론트 > 리액트 react' 카테고리의 다른 글
리액트 prop type 오류체크하는 법 (0) | 2022.03.23 |
---|---|
useRef 이해하고 싶다.. (0) | 2021.11.02 |
투두리스트 컴포넌트 만드는중 (정신차려~에러해결기록) (0) | 2021.10.26 |
가운데 정렬 margin / flex (0) | 2021.10.26 |
리액트 scss 오류 Node Sass version 6.0.0 is incompatible with ^4.0.0 || ^5.0.0. / 경로 설정 (0) | 2021.10.26 |