Enviar pesquisa
Carregar
11.react router dom
•
0 gostou
•
240 visualizações
Daniel Lim
Seguir
react router
Leia menos
Leia mais
Software
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 23
Baixar agora
Baixar para ler offline
Recomendados
12.context api
12.context api
Daniel Lim
Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)
Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)
LanarkSeung
2.jsx 101
2.jsx 101
Daniel Lim
Vue SSR vs Prerender
Vue SSR vs Prerender
Changwan Jun
Spring Boot + React + Gradle in VSCode
Spring Boot + React + Gradle in VSCode
dpTablo
[오픈소스컨설팅]Spring MVC
[오픈소스컨설팅]Spring MVC
Ji-Woong Choi
4-3. jquery
4-3. jquery
JinKyoungHeo
Nodejs express
Nodejs express
Hyosung Jeon
Recomendados
12.context api
12.context api
Daniel Lim
Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)
Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)
LanarkSeung
2.jsx 101
2.jsx 101
Daniel Lim
Vue SSR vs Prerender
Vue SSR vs Prerender
Changwan Jun
Spring Boot + React + Gradle in VSCode
Spring Boot + React + Gradle in VSCode
dpTablo
[오픈소스컨설팅]Spring MVC
[오픈소스컨설팅]Spring MVC
Ji-Woong Choi
4-3. jquery
4-3. jquery
JinKyoungHeo
Nodejs express
Nodejs express
Hyosung Jeon
파이썬 웹 프로그래밍 2탄
파이썬 웹 프로그래밍 2탄
SeongHyun Ahn
1.react 101
1.react 101
Daniel Lim
JQuery를 이용하여 웹 위젯 작성하기_(주)시스포유아이앤씨
JQuery를 이용하여 웹 위젯 작성하기_(주)시스포유아이앤씨
sys4u
3.component 101
3.component 101
Daniel Lim
정적 컨텐츠 제너레이터 GatsbyJS에 대해서 알아봅시다.
정적 컨텐츠 제너레이터 GatsbyJS에 대해서 알아봅시다.
Kenneth Ceyer
요즘웹개발
요즘웹개발
Lee MyoungKyu
Spring mvc
Spring mvc
ksain
React 튜토리얼 1차시
React 튜토리얼 1차시
태현 김
프론트엔드 개발 첫걸음
프론트엔드 개발 첫걸음
DataUs
Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까?
Kim Hunmin
#22.스프링프레임워크 & 마이바티스 (Spring Framework, MyBatis)_스프링프레임워크 강좌, 재직자환급교육,실업자국비지원...
#22.스프링프레임워크 & 마이바티스 (Spring Framework, MyBatis)_스프링프레임워크 강좌, 재직자환급교육,실업자국비지원...
탑크리에듀(구로디지털단지역3번출구 2분거리)
Mean 스택을 사용한 IoT 개발
Mean 스택을 사용한 IoT 개발
Jay Park
파크히어 Realm 사용 사례
파크히어 Realm 사용 사례
선협 이
LucideWorks Banana 소개
LucideWorks Banana 소개
SuHyun Jeon
Node.js의 도입과 활용
Node.js의 도입과 활용
Jin wook
Angular2 router&http
Angular2 router&http
Dong Jun Kwon
[112]rest에서 graph ql과 relay로 갈아타기 이정우
[112]rest에서 graph ql과 relay로 갈아타기 이정우
NAVER D2
React 실무활용 이야기
React 실무활용 이야기
철민 배
Front end dev 2016 & beyond
Front end dev 2016 & beyond
Jae Sung Park
Mvc 패턴
Mvc 패턴
Seokju Hong
내가 생각하는 개발자란?
내가 생각하는 개발자란?
Daniel Lim
개발자를 넘어 기술 리더로 가는 길을 읽고
개발자를 넘어 기술 리더로 가는 길을 읽고
Daniel Lim
Mais conteúdo relacionado
Semelhante a 11.react router dom
파이썬 웹 프로그래밍 2탄
파이썬 웹 프로그래밍 2탄
SeongHyun Ahn
1.react 101
1.react 101
Daniel Lim
JQuery를 이용하여 웹 위젯 작성하기_(주)시스포유아이앤씨
JQuery를 이용하여 웹 위젯 작성하기_(주)시스포유아이앤씨
sys4u
3.component 101
3.component 101
Daniel Lim
정적 컨텐츠 제너레이터 GatsbyJS에 대해서 알아봅시다.
정적 컨텐츠 제너레이터 GatsbyJS에 대해서 알아봅시다.
Kenneth Ceyer
요즘웹개발
요즘웹개발
Lee MyoungKyu
Spring mvc
Spring mvc
ksain
React 튜토리얼 1차시
React 튜토리얼 1차시
태현 김
프론트엔드 개발 첫걸음
프론트엔드 개발 첫걸음
DataUs
Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까?
Kim Hunmin
#22.스프링프레임워크 & 마이바티스 (Spring Framework, MyBatis)_스프링프레임워크 강좌, 재직자환급교육,실업자국비지원...
#22.스프링프레임워크 & 마이바티스 (Spring Framework, MyBatis)_스프링프레임워크 강좌, 재직자환급교육,실업자국비지원...
탑크리에듀(구로디지털단지역3번출구 2분거리)
Mean 스택을 사용한 IoT 개발
Mean 스택을 사용한 IoT 개발
Jay Park
파크히어 Realm 사용 사례
파크히어 Realm 사용 사례
선협 이
LucideWorks Banana 소개
LucideWorks Banana 소개
SuHyun Jeon
Node.js의 도입과 활용
Node.js의 도입과 활용
Jin wook
Angular2 router&http
Angular2 router&http
Dong Jun Kwon
[112]rest에서 graph ql과 relay로 갈아타기 이정우
[112]rest에서 graph ql과 relay로 갈아타기 이정우
NAVER D2
React 실무활용 이야기
React 실무활용 이야기
철민 배
Front end dev 2016 & beyond
Front end dev 2016 & beyond
Jae Sung Park
Mvc 패턴
Mvc 패턴
Seokju Hong
Semelhante a 11.react router dom
(20)
파이썬 웹 프로그래밍 2탄
파이썬 웹 프로그래밍 2탄
1.react 101
1.react 101
JQuery를 이용하여 웹 위젯 작성하기_(주)시스포유아이앤씨
JQuery를 이용하여 웹 위젯 작성하기_(주)시스포유아이앤씨
3.component 101
3.component 101
정적 컨텐츠 제너레이터 GatsbyJS에 대해서 알아봅시다.
정적 컨텐츠 제너레이터 GatsbyJS에 대해서 알아봅시다.
요즘웹개발
요즘웹개발
Spring mvc
Spring mvc
React 튜토리얼 1차시
React 튜토리얼 1차시
프론트엔드 개발 첫걸음
프론트엔드 개발 첫걸음
Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까?
#22.스프링프레임워크 & 마이바티스 (Spring Framework, MyBatis)_스프링프레임워크 강좌, 재직자환급교육,실업자국비지원...
#22.스프링프레임워크 & 마이바티스 (Spring Framework, MyBatis)_스프링프레임워크 강좌, 재직자환급교육,실업자국비지원...
Mean 스택을 사용한 IoT 개발
Mean 스택을 사용한 IoT 개발
파크히어 Realm 사용 사례
파크히어 Realm 사용 사례
LucideWorks Banana 소개
LucideWorks Banana 소개
Node.js의 도입과 활용
Node.js의 도입과 활용
Angular2 router&http
Angular2 router&http
[112]rest에서 graph ql과 relay로 갈아타기 이정우
[112]rest에서 graph ql과 relay로 갈아타기 이정우
React 실무활용 이야기
React 실무활용 이야기
Front end dev 2016 & beyond
Front end dev 2016 & beyond
Mvc 패턴
Mvc 패턴
Mais de Daniel Lim
내가 생각하는 개발자란?
내가 생각하는 개발자란?
Daniel Lim
개발자를 넘어 기술 리더로 가는 길을 읽고
개발자를 넘어 기술 리더로 가는 길을 읽고
Daniel Lim
스크럼 101
스크럼 101
Daniel Lim
nodejs_101.pdf
nodejs_101.pdf
Daniel Lim
For You
For You
Daniel Lim
Nest js 101
Nest js 101
Daniel Lim
피드백 시스템
피드백 시스템
Daniel Lim
13.code split
13.code split
Daniel Lim
9.component style
9.component style
Daniel Lim
7.component life cycle
7.component life cycle
Daniel Lim
8.hooks
8.hooks
Daniel Lim
6.component repeat
6.component repeat
Daniel Lim
4.event handling
4.event handling
Daniel Lim
5.ref 101
5.ref 101
Daniel Lim
Swagger? OAS? with NodeJS
Swagger? OAS? with NodeJS
Daniel Lim
CuKu V1.3
CuKu V1.3
Daniel Lim
Kubernetes object에 대하여
Kubernetes object에 대하여
Daniel Lim
라즈베리파이 배우기 GPIO 편
라즈베리파이 배우기 GPIO 편
Daniel Lim
ReactJS & Material-ui Hello world
ReactJS & Material-ui Hello world
Daniel Lim
JAVA 개발자가 시작하는 NodeJS
JAVA 개발자가 시작하는 NodeJS
Daniel Lim
Mais de Daniel Lim
(20)
내가 생각하는 개발자란?
내가 생각하는 개발자란?
개발자를 넘어 기술 리더로 가는 길을 읽고
개발자를 넘어 기술 리더로 가는 길을 읽고
스크럼 101
스크럼 101
nodejs_101.pdf
nodejs_101.pdf
For You
For You
Nest js 101
Nest js 101
피드백 시스템
피드백 시스템
13.code split
13.code split
9.component style
9.component style
7.component life cycle
7.component life cycle
8.hooks
8.hooks
6.component repeat
6.component repeat
4.event handling
4.event handling
5.ref 101
5.ref 101
Swagger? OAS? with NodeJS
Swagger? OAS? with NodeJS
CuKu V1.3
CuKu V1.3
Kubernetes object에 대하여
Kubernetes object에 대하여
라즈베리파이 배우기 GPIO 편
라즈베리파이 배우기 GPIO 편
ReactJS & Material-ui Hello world
ReactJS & Material-ui Hello world
JAVA 개발자가 시작하는 NodeJS
JAVA 개발자가 시작하는 NodeJS
11.react router dom
1.
react-router-dom 임광규 2020.ReactJS 1
2.
SPA SPA는SinglePageApplication의약어입니다.말그대로한개의페이지로구성된애플리케 이션을뜻합니다. 전총적인웹페이지는여러페이지로구성되어있습니다. 2020.ReactJS 2
3.
라우팅 다른주소에다른화면을보여주는것을 라우팅 이라고합니다. 리액트라이브러리자체에이기능이내장되어있지는않습니다. 리액트라우팅라이브러리는리액트라우터(react-router),리치라우터(reach-router),Next.js등 여러가지가있습니다. 이중가장오랫동안사용되었고사용빈도역시높은
리액트 라우터 를알아봅니다. 2020.ReactJS 3
4.
SPA의단점 SPA의단점은앱의규모가커지면자바스크립트파일이너무커진다는것입니다. 페이지로딩시사용자가실제로방문하지않을수도있는페이지의스크립트도불러오기때문입 니다. 이때코드스플리팅(codesplitting)을사용하면라우트별로파일을나누어서트래픽과로딩속도를 개선할수있습니다. 2020.ReactJS 4
5.
리액트라우터설치 설치는아래명령어를이용해서진해합니다. $ yarn add
react-router-dom or $ npm install react-router-dom --save 2020.ReactJS 5
6.
라우터적용 index.js import React from
'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; ReactDOM.render(<BrowserRouter> <App /> </BroserRouter>, document.getElementById('root')); } 2020.ReactJS 6
7.
라우터적용 app.js import React from
'react'; import { Route } from 'react-router-dom'; import About from './About'; import Home from './Home'; export default () => { return ( <div> <Route path="/" component={Home} exact={true} /> <Route path="/about" component={About} /> </div> ); } 2020.ReactJS 7
8.
Router 사용법 Route컴포넌트를사용하여사용자의현재경로에따라다른컴포넌트를보여줄수있습니다. <Route path="주소규칙"
component={보여 줄 컴포넌트} /> 2020.ReactJS 8
9.
Link 컴포넌트를사용하여다른주소로이동 Link컴포넌트는클릭하면다른주소로이동시켜주는컴포넌트입니다. 일반웹에서는a태그를사용하여페이지를전환하는데리액트라우터를사용할때는이태그를 직접사용하면안됩니다. 사용법 <Link to="주소">내용</Link> 2020.ReactJS
9
10.
Link컴포넌트사용예 app.js import React from
'react'; import { Route, Link } from 'react-router-dom'; import About from './About'; import Home from './Home'; export default () => { return ( <div> <ul> <li><Link to="/">홈</Link></li> <li><Link to="/about">소개</Link></li> </ul> <Route path="/" component={Home} exact={true} /> <Route path="/about" component={About} /> </div> ); } 2020.ReactJS 10
11.
Route하나에여러개의path설정하기 Route하나에여러개의path를지정하는것은최신버전의리액트라우터v5부터적용된기능 입니다. /about , /info
에접근시About컴포넌트로보여줌 import React from 'react'; import { Route } from 'react-router-dom'; import About from './About'; import Home from './Home'; export default () => { return ( <div> <Route path="/" component={Home} exact={true} /> <Route path={['/about', '/info']} component={About} /> </div> ); } 2020.ReactJS 11
12.
URL파라미터와쿼리 페이지주소를정의할때가끔은유동적인값을전달해야할때도있습니다. 이를파라미터와쿼리로나눌수있습니다. 파라미터예시:/info/lahuman 쿼리예시:/about?id=lahuman 2020.ReactJS 12
13.
URL파라미터예 /info페이지에서파라미터를사용시/info/:id형식으로값을넣어주어props로받아와서조회 가가능합니다. import React from
'react'; export default ({ match }) => { const { id } = match.params; return ( <div> <h1> {id} </h1> </div> ); } 2020.ReactJS 13
14.
app.js import React from
'react'; import { Route, Link } from 'react-router-dom'; import About from './About'; import Info from './Info'; import Home from './Home'; export default () => { return ( <div> <ul> <li><Link to="/">홈</Link></li> <li><Link to="/about">소개</Link></li> <li><Link to="/info/lahuman">lahuman 정보 조회</Link></li> </ul> <Route path="/" component={Home} exact={true} /> <Route path="/about" component={About} /> <Route path="/info/:id" component={Info} /> </div> ); } 2020.ReactJS 14
15.
URL쿼리 쿼리는location객체에들어있는search값에서조회할수있습니다. location객체는라우트로사용된컴포넌트에게props로전달되며웹의현재주소에대한정보 를지니고있습니다. location객체정보 { "pathname": "/about", "search": "?id=lahuman", "hash":
"" } 2020.ReactJS 15
16.
qs라이브러리 쿼리문자열로객체로변환할때는qs라이브러리를사용하여쉽게처리할수있습니다. $ yarn add
qs or $ npm install qs --save 2020.ReactJS 16
17.
URL쿼리예제 qs를이용하여파싱된결과는언제나문자열입니다. import React from
'react'; import qs from 'qs'; export default ({location}) => { const query = qs.parse(location.search, { ignoreQueryPrefix: true // 문자열 맨 앞의 ?를 생략 합니다. }); return <h1>{query.id}</h1> } 2020.ReactJS 17
18.
서브라우트 서브라우트는라우트내부에도라우트를정의하는것을의미합니다. 그냥라우트로사용되고있는컴포넌트의내부에Route컴포넌트를또사용하면됩니다. import React from
'react'; import { Route, Link } from 'react-router-dom'; import Info from './Info'; export default () => { return ( <div> <ul> <li><Link to="/info/abcd">abcd 정보 조회</Link></li> <li><Link to="/info/lahuman">lahuman 정보 조회</Link></li> </ul> <Route path="/info" exact render={() => <div>사용자를 선택해주셔요.</div>} /> <Route path="/info/:id" component={Info} /> </div> ); } 2020.ReactJS 18
19.
리액트라우터부가기능 .history 라우트로사용된컴포넌트에match,location과함께전달되는props중하나로,이객체 를통해컴포넌트내에구현하는메소드에서구현하는메서드에서라우터API를호출할수 있습니다. .withRouter HoC(Higher-orderComponent)로라우트로사용된컴포넌트가아니어도match, location,history객체를접근할수있게해줍니다. .Switch 여러Route를감싸서그중일치하는단하나의라우트만랜더링시켜줍니다.모든규칙과 일치하지않을때NotFound페이지도구현할수있습니다. .NavLink Link와비슷,단링크가활성화되었을때의스타일을activeStyle에적용하면됩니다. 2020.ReactJS 19
20.
history예제 import React from
'react'; export default ({history}) => { return ( <div> <button onClick={() => history.push('/')}>홈으로</button> <button onClick={() => history.goBack()}>뒤로</button> </div> ); } 2020.ReactJS 20
21.
withRouter예제 import React from
'react'; import { withRouter } from 'react-router-dom'; export default withRouter(({location, match, history}) => { const query = qs.parse(location.search, { ignoreQueryPrefix: true // 문자열 맨 앞의 ?를 생략 합니다. }); return <div> <h1>{query.id}</h1> <button onClick={() => history.push('/')}>홈으로</button> <button onClick={() => history.goBack()}>뒤로</button> </div> }) 2020.ReactJS 21
22.
Switch예제 import React from
'react'; import { Route, Link, Switch } from 'react-router-dom'; import About from './About'; import Info from './Info'; import Home from './Home'; export default () => { return ( <div> <ul> <li><Link to="/">홈</Link></li> <li><Link to="/about">소개</Link></li> <li><Link to="/info/lahuman">lahuman 정보 조회</Link></li> </ul> <Switch> <Route path="/" component={Home} exact={true} /> <Route path="/about" component={About} /> <Route path="/info/:id" component={Info} /> <Route render={({location}) => <div> <h2>페이지가 존재 하지 않습니다.</h2> <p>{location.pathname}</p> </div>} /> </Switch> </div> ); } 2020.ReactJS 22
23.
NavLink예제 import React from
'react'; import { Route, NavLink } from 'react-router-dom'; import Info from './Info'; export default () => { const activeStyle = { background: 'red', color: 'white' } return ( <div> <ul> <li><NavLink activeStyle={activeStyle} to="/info/abcd" active>abcd 정보 조회</NavLink></li> <li><NavLink activeStyle={activeStyle} to="/info/lahuman">lahuman 정보 조회</NavLink></li> </ul> <Route path="/info" exact render={() => <div>사용자를 선택해주셔요.</div>} /> <Route path="/info/:id" component={Info} /> </div> ); } 2020.ReactJS 23
Baixar agora