[React-router-dom]

• Route : 해당 경로 연결 시 해당 컴포넌트의 export된 컴포넌트 실행(폴더 면 안에 있는 index.js 의 컴포넌트 실행)
• Switch : 경로 렌더엮이는 상황방지
• Redirect : 그냥 거기로 보내줌 from to
• Link : <a>대신 쓸수있음(to 써야함) 업데이트 되는 부분만 바꿔서 js방식으로 페이지 넘겨줌, 라우터안에서 써야함
• withRouter: router쓸때 props정보 활용가능하게함

[React Router 경로 차단 custom]

[react router withRouter 경로 id 값 가지고오기]

match 값 가지고 오면됨

const Coin = withRouter(({ location: { pathname }, match }) => {

  const getCoin = async () => {
    const {
      params: { id }
    } = match;

			....

[ 리액트 라우터 props]

• history

  1. 브라우저의 window.history 와 유사

  2. 주소를 임의로 변경하거나 되돌아 갈 수 있도록 한다.

  3. 주소 변경시, SPA 특성을 지키기 위해 페이지 전체를 리로드 하지 않는다.

  4. location 이 포함되어 있다.

     

• location

  1. 브라우저의 window.location 와 유사

  2. 현재 페이지 정보를 지니고 있다.

  3. url의 query 정보를 search라는 프로퍼티에 가지고 있다.

     

• match

  1. Route의 path에 정의한 것과 매칭된 정보를 가지고 있다.

  2. params 에 설정한 파라미터를 담고 있다.

     

[리액트 라우터 훅스]

• useHistory

  import { useHistory } from "react-router-dom";
  
  function HomeButton() {
    let history = useHistory();
  
    function handleClick() {
      history.push("/home");
    }
  
    return (
      <button type="button" onClick={handleClick}>
        Go home
      </button>
    );
  }