🤩 CRA, React Router dom를 이용하여 이전 페이지로 이동하기 (+ Next.js도 해결 방법)

먼저 CRA로 만든 프로젝트에 react-router-dom 을 설치합니다.

1. yarn add react-router-dom
2. npm install react-router-dom

import React from "react";
import { AlarmHeader, AlarmWrap, Back, Title } from "./styles";
📍 import { useHistory } from "react-router-dom";

type Props = {
  title?: string;
};

const alarm: React.FC<Props> = ({ title }: Props) => {
  📍 const history = useHistory();

  return (
    <AlarmHeader>
      <AlarmWrap>
        📍 <Back onClick={() => history.goBack()}>
          <img
            src={process.env.PUBLIC_URL + "/images/header_back.svg"}
            alt="뒤로가기"
          />
        </Back>

        <Title>{title}</Title>
      </AlarmWrap>
    </AlarmHeader>
  );
};

export default alarm;

useHistory라는 Hook을 사용하여 정말 간단하게 이전 페이지로 이동 할 수 있다.

<Back onClick={() => history.goBack()}>

그리고 버튼에다가 onClick 이벤트를 넣어주기.

---

Next 기반 프로젝트, 전 페이지로 가기

next 라이브러리로 만들어진 프로젝트에는 next 라이브러리 자체 내에 next/router 라는 기능을 제공해줍니다.

import styled from '@emotion/styled'
📍 import { useRouter } from 'next/router'

const SettingButton = () => {
  📍 const router = useRouter()

  return (
    <Container>
      <button type="button" className="save">
        저장
      </button>

      📍 <button type="button" className="back" onClick={() => router.back()}>
        뒤로
      </button>
    </Container>
  )
}

참고자료

https://nextjs.org/docs/api-reference/next/router