React Router를 사용하여 이전 페이지로 돌아가기

React는 오늘날 가장 일반적으로 사용되는 프런트 엔드 라이브러리입니다. 탐색 및 기타 필수 기능이 없기 때문에 프레임워크라고 부를 수 없습니다. 따라서 React 개발자는 일반적으로 react-router와 같은 외부 라이브러리를 가져와 탐색 기능을 구현합니다.

이 기사는 React에서 필수 탐색 기능, 특히 React Router가 이전 페이지로 돌아가도록 지시하는 방법을 구현하는 데 도움을 주는 것을 목표로 합니다.

React Router를 사용하여 이전 페이지로 돌아가기

인터넷 검색 경험이 있는 사람이라면 돌아가기 기능이 얼마나 중요한지 이해합니다. 사용자가 이전 페이지나 URL로 다시 이동할 수 있도록 하는 기능을 React 앱 내에 구현하는 것은 좋은 UX 사례입니다.

히스토리 스택

인터넷 브라우저는 귀하의 행동을 기록합니다. 기록 스택은 웹 사이트를 탐색할 때의 단계 모음입니다.

기록 스택은 브라우저 기능이지만 react-router 라이브러리도 이 정보를 history 개체에 저장합니다. 이 개체로 작업하여 사용자가 응용 프로그램을 원활하게 탐색하도록 도울 수 있습니다.

React Router v4 및 v5를 사용하여 이전 페이지로 돌아가기

react-router 라이브러리의 이전 버전에서는 useHistory() 후크를 사용하여 특정 페이지로 이동했습니다. history 개체의 인스턴스에 대한 액세스를 제공합니다.

.push(), .pop() 및 .replace() 메서드를 사용하여 필요에 따라 URL을 변경할 수 있습니다. history 인스턴스에는 이전 페이지로 이동할 수 있는 goBack() 메서드가 있습니다.

예를 살펴보겠습니다.

function NavigateHome() {
  let history = useHistory();
  function handleClick() {
    history.push("/somePage");
  }
  function goBack() {
    history.goBack();
  }
    return (
    <div>
    <button onClick={handleClick}>
       Go to some page
    </button>
    <button onClick={goBack}>
       Go back
    </button>
    </div>

  );
}

이 예제에서 사용자가 첫 번째 버튼을 클릭할 때마다 react-router는 사용자를 push() 메소드에 인수로 전달된 URL로 이동시킵니다. 그러나 사용자가 두 번째 버튼을 클릭하면 이전 페이지로 돌아갑니다.

React Router v6를 사용하여 이전 페이지로 돌아가기

최신 버전의 React Router 라이브러리는 더 이상 useHistory() 후크를 지원하지 않습니다. 라이브러리 개발자는 useNavigate() 후크를 대신 사용할 것을 권장합니다.

history와 달리 navigate API는 .push() 및 기타 JavaScript 메서드를 사용할 필요가 없습니다. 인수 자체가 필요합니다.

또한 .goBack() 메서드를 사용하는 대신 navigate 인스턴스에 대한 인수를 변경해야 합니다. -1을 인수로 사용하여 navigate를 호출하기만 하면 됩니다.

위의 예는 navigate API를 사용하는 React Router v6으로 다시 작성할 수 있습니다.

import { useNavigate, Link, BrowserRouter as Router } from "react-router-dom";
export default function App() {
  let navigate = useNavigate();
  let goToAnotherPage = () => {
    navigate("/another");
  };
  let goToSomePage = () => {
    navigate("/somepage");
  };
  let goBack = () => {
    navigate(-1);
  };
  return (
    <div className="App">
      <span
        onClick={goToAnotherPage}
        style={{ backgroundColor: "yellow", fontSize: 33, padding: 5 }}
      >
        Go To Another Page
      </span>
      <br />
      <span
        onClick={goToSomePage}
        style={{ backgroundColor: "yellow", fontSize: 33, padding: 5 }}
      >
        Go To Some Page
      </span>
      <br />
      <span
        onClick={goBack}
        style={{ backgroundColor: "lightblue", fontSize: 33, padding: 5 }}
      >
        Go Back
      </span>
    </div>
  );
}

이 예에는 세 개의 버튼이 있습니다. 처음 두 개는 사용자를 특정 URL로 안내하고 세 번째는 사용자를 이전 위치로 되돌립니다.

이를 위해 탐색 API를 사용했습니다. navigate는 목적지 URL을 인수로 받아들이는 함수입니다. -1을 인수로 제공하면 이전 페이지로 돌아갑니다.

CodeSandbox에서 코드를 가지고 놀 수 있습니다.