react-router-dom v6

참고: 엘리스 AI트랙 문서 및 react-router-dom 공식문서

(v5) useHistory 👉 (v6) useNavigate

<Link>를 사용하지 않아도 버튼을 구현하여 다른 페이지로 이동이 가능하다.

(v5) 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>
  );
}

(v6) useNavigate

function Button() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate("/another");
  }
    
  return (
   <button onClick={handleClick}>이동</button>
  );
}

위의 useNavigate 예시는 과거 useHistory에서 history 객체를 만들어 준 후, 버튼 클릭에 대한 이벤트 핸들러(handleClick) 안에서 history.push를 사용하고 이동할 페이지의 path를 인자로 넘겨줘 버튼 클릭 시 해당 페이지로 이동하는 것과 같은 동작을 한다.

useLocation

useLocation Hook은 현재 URL의 정보를 가지는 location 객체를 반환한다.

location 객체는 대표적으로 key, pathname, search, state의 속성값을 가지며

예시: https://elice.io/courses?name=elice&year=2022

• pathname: /courses처럼 endpoint를 의미
• search: ? 이후의 queryString을 값으로 가진다.
  - queryString은 parameter=value의 형태를 가진다.
• state: 이전 페이지로부터 전달받은 인자를 의미

location 객체의 search 속성값과 URLSearchParams 객체를 함께 사용하면 queryString의 key, value쌍을 쉽게 가져올 수 있다.

const location = useLocation();
const info = new URLSearchParams(location.search);

info.get(key_name)을 사용하면 queryString에 담겨있는 해당 key값의 value를 가져올 수 있다.

const location = useLocation();
const info = new URLSearchParams(location.search);

// 예시 https://elice.io/courses?name=elice&year=2022의 경우
// info.get(year)은 2022를 가져오겠지

queryString이 아닌 location.state로 데이터 받기

const nav = useNavigate();
nav("/example", { state: data});

위와 같은 방법을 사용하면 굳이 queryString이 아니더라도 URL에 정보를 담지 않고도 하위 컴포넌트로 데이터를 전달할 수 있다.

엘리스 예제코드

InfoCard.js

연락처 카드들 리스트

import React from "react";
import styled from "styled-components";
import { useNavigate } from "react-router-dom";

export default function InfoCard({ info }) {
  const name = info.name;
  const nav = useNavigate();

  const handleClick = () => {
    /* location.state에 정보를 담아 detail로 이동 */
    nav("/detail", { state: info });
  };

  return <Card onClick={handleClick}>{name}</Card>;
}

const Card = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  width: 85%;
  height: 54px;
  border: 2px solid black;
  margin: 20px 20px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
`;

DetailPage.js

각 연락처카드 클릭시 이동하게 되는 디테일페이지

import React from "react";
import "./DetailPage.css";
import { Link, useLocation } from "react-router-dom";

export default function DetailPage() {
  /* location 객체를 사용하기 위한 코드 */
  const location = useLocation();
  /* location 객체의 state 정보를 가져오는 코드 */
  const info = location.state;

  return (
    <div className="detailpage">
      <div className="detailpage-header">DetailPage</div>
      <div className="detailpage-content">
        <div>
          name:
          <span>
            {info.name}
          </span>
        </div>
        <div>
          phone:
          <span>
            {info.phone}
          </span>
        </div>
        <div>
          addr:
          <span>
            {info.addr}
          </span>
        </div>
      </div>
      <div className="detailpage-footer">
        <Link to="/List">Back</Link>
      </div>
    </div>
  );
}