🍒 React-Router

react는 view만 담당하는 라이브러리이다. 그래서 라우팅을 담당하는 react-router를 따로 설치해주어야 한다 원래 싱글페이지 어플리케이션(SPA)는 주소가 없어 접속하기 힘들었지만 react-router를 사용하면 페이지를 깜빡임이 없으면서도 주소를 가질 수 있게 된다. 예를들어 페이지를 넘길때 특정 레이아웃은 고정되어있고 내용만 바뀌며 주소도 그에 따라 바뀐다

install

---

npm install --save react-router

위와 같이 terminal에 입력해주면 설치할 수 있다.

How?

---

src폴더안에 Routes.js , index.js 를 만들어준다.

index.js에서 설정을 해주고, Routes.js에서 각 컴포넌트를 import를 하고 Router안에서 페이지를 지정해준다

Router.js

• <Route> 요청 경로와 렌더링할 컴포넌트를 설정한다
• <Switch> 하위 라우터 중 하나를 선택한다
• <Redirect> 요청 경로를 다른 경로로 리다이렉션한다. 예시로 설정하지 않는 경로 요청시 Home경로로 이동한다

Index.js

🍒 Router: match,location,history

---

Router Props

각각의 Route와 연결된 컴포넌트에 props로 match, location, history 라는 객체를 전달하게 된다. 아래는 콘솔로 props를 확인해 본 결과이다.

console.log(this.props)

history, location, match가 담겨있는 것을 확인할 수 있다.

Match

match 객체에는 와 URL이 매칭된 정보가 담겨져있다.
match.params로 patch에 설정한 파라미터값을 가져올 수 있다.

• path : [string] 라우터에 정의된 path

• url : [string] 실제 클라이언트로부터 요청된 url path

• isExact : [boolean] true일 경우 전체 경로가 완전히 매칭될 경우에만 요청을 수행

• params : [JSON object] url path로 전달된 파라미터 객체

  
  
  

Location

Location 객체에는 현재 페이지의 정보를 가지고 있다. 대표적으로 location.search로 현재 url의 쿼리 스트링으르 가져올 수 있다.

• pathname : [string] 현재 페이지의 경로명

• search : [string] 현재 페이지의 query string

• hash : [string] 현재 페이지의 hash

  
  
  

History

History 객체는 브라우저 history와 유사하다. 스택(stack)에 현재까지 이동한 url 경로들이 담겨있는 형태로 주소를 임의로 변경하거나 되돌아갈 수 있도록 해준다.

• length : [number] 전체 history 스택의 길이

• action : [string] 최근에 수행된 action

• location : [JSON object] 최근 경로 정보

• push(path,[state]) : [fuction] 새로운 경로를 history 스택으로 푸시하여 페이지를 이동

  보통 이동할 링크를 push()안에 넣어 쓴다.
  
  

  this.props.history.push(`이동할링크`);

  아래는 토큰이나결제정보를 다음 페이지 이동할때 파라미터를 가지고 넘어갈때 사용한다.

  
  

  this.props.history.push((
      pathname: '이동할링크',
      state: { detail : 전달할 파라미터 }
  })

  전달 받는 페이지에서는 아래처럼 불러온다

  const getparams = this.props.location.state.detail;

  이렇게 불러오면 getparams 안에 전달받은 파라미터가 담아져 있다.
  

• replace(path,[state]) : [fuction] 최근 경로를 history 스택에서 교체하여 페이지를 이동

• go(n) : [function] history 스택의 포인터를 n번째로 이동

• goBack() : [function] 이전 페이지로 이동

• goForward() : [function] 앞 페이지로 이동

• block(prompt) : [function] history 스택의 PUSH/POP 동작을 제어