0711_React/ Redirect/ Router

리다이렉트

 

1. 링크 이용하기

import { Link } from 'react-router';

 

 

 

 

 

링크이용해서 리다이렉트

 

2. history props 이용하기

history 객체 이용해서 리다이렉트

 

전 history로 가기 (나가기, 전 페이지로 갈때 이용)

3. withRouter 이용하기 (하위 컴포넌트에서)

 

하위 컴포넌트는 history에 접근할 수 없기때문에 상위 컴포넌트의 Router의 history 객체와 연결해야함

 

 

 

 

React Router V4 

라우팅: 다른 주소에 따라 다른 뷰를 보여주는 것

SPA: Single Page Application 페이지가 1개인 어플리케이션

 

리액트는 SPA!

모든 파일을 다 뿌려준 상태라 가상으로 그안에서 URL 마다 다른 컴포넌트를 그려 페이지가 바뀌는 것 처럼 보여줘야한다. 즉, SPA는 뻔적거림이 없는 말 그대로 페이지가 1개인 어플리케이션 인 것!

=> 주소마다 다른 뷰를 그려주는 <React Router> 가 필요

 

 

1. 라이브러리 임포트

import {BrowerRouter as Router, Route, Switch} from "react-router-dom";

 

2. url로 들어갔을 때 보여줄 컴포넌트들 임포트

import Home from "./routes/Home";

 

3. render() 안에서 바꿔야할 부분 통째로 <Router>로 감싸기

예시

4. switch()에 따라 각 해당하는 url을 다시 그려주고 <div>빠져나온다. 각각ex) path="url" 즉 url이 무엇인지에 따라 ex) component={Home}해당 컴포넌트를 그려준다. exact 또는 exact={true} 는 / 가 포함된 url이 아니라 정확히/ 로 들어왔을 때만 해당 컴포넌트를 그려주게 해주는 것이다. 이것을 안해주면 /about /posts 등등 다른 url에서도 / 을 포함하고 있기 때문에 의도치 않게 함께 그려지는 것을 방지해야 한다.

 

5. 다른 곳으로 이동할때 history에 넣어준다

this.props.history.push('/들어간곳')

 

URL 이동시키기

— Link : a 태그와 같다. 하지만 SPA 특성상 a태그 처럼 새로고침이 발생하면 안되기에, a 태그를 기반으로 기능상의 개선을 통해 새로고침없이 다른 뷰를 렌더 하기위해 사용하는 것이다.

— history.push : Route는 컴포넌트에 기본적으로 match, history, location 이라는 것을 넘겨준다. 이때 histroy.push(‘/인자’) 함수에 인자를 넣어주면 해당 인자로 url을 새로고침 없이 이동시켜준다.

 

Route의 컴포넌트에 기본적으로 props로 match, history, location을 넘겨주는 특성 덕분에 영롱하게 존재

 

 

 

history

1. 브라우저의 window.history 와 유사
2. 주소를 임의로 변경하거나 되돌아 갈 수 있도록 한다.
3. 주소 변경시, SPA 특성을 지키기 위해 페이지 전체를 리로드 하지 않는다.
4. location 이 포함되어 있다.

 

location

1. 브라우저의 window.location 와 유사
2. 현재 페이지 정보를 지니고 있다.
3. url의 query 정보를 search라는 프로퍼티에 가지고 있다.

 

match

1. Route의 path에 정의한 것과 매칭된 정보를 가지고 있다.
2. params 에 설정한 파라미터를 담고 있다.

 

 

 

 

 

 

 

 

 

 

 

 

 

https://medium.com/@han7096/react-router-v4-%EC%A0%95%EB%A6%AC-e9931b63dcae

React Router V4 정리