1. Hooks

🔸 history

history는 prop을 이용하여 버튼에 페이지 이동을 추가할 수 있다.
화면이동에 사용할 수 있는 history 인스턴스에 접근하게 해준다. push로 경로를 변경하여 이동할 수 있으며, goBack() 함수를 쓰면 뒤로 돌아간다.

//Home.js
import { useHistory } from "react-router-dom";
export default function Home() {
  let history = useHistory();
  const goProfile = () => {
    history.push("/profile");
  };
  const goSub = () => {
    history.push("/sub");
  };
  return (
    <div>
      <h1>This is Home</h1>
      <button onClick={goProfile}>Go Profile</button>
      <button onClick={goSub}>Go SubPage</button>
  	  <button onClick={() => history.goBack()}>Go Back</button>
    </div>
  );
}

🔸 location

location은 사용자가 현재 머물러있는 페이지에 대한 정보를 알려주는 hooks이다. location을 출력하게 되면 !

여러가지 객체들이 출력되는데, pathname와 search가 가장 일반적으로 쓰인다.
search는 쿼리스트링을 분석해야하는 상황에서 유용하다. 앞에서 pathname이 출력했던 부분을 제외한 쿼리스트링이 출력되며, 결과는 ?keyword=리액트 라는 출력결과가 나온다. 출력된 값은 query-string이라는 쿼리스트링 파싱 라이브러리를 이용하여 제대로 된 값을 얻어낼 수 있다.

❣ SubPage.js

• pathname: 면 URL의 도메인 다음의 /를 식별자로써 /부터의 문자열이 pathname이 들어감.
• search : URL에 정보를 포함해서 화면이동을 하는 역할
• hash : search와 비슷하며 ?와 #의 차이. search,hash 함께 사용 가능.
• state : 숨겨서 또는 코드로 보내는 정보

🔸 match

match 객체에는 route path와 url의 매칭에 대한 정보를 갖고 있다.

• isExact : true일 때만 수행
• params : 경로에 전달된 파라미터 값을 가진 객체
• path : Route에 정의된 경로
• url : 클라이언트로부터 실제 요청받은 경로