이렇게 history를 사용하여 to 값이 있을 경우 페이지를 이동하도록 구현한 뒤, Button 컴포넌트를 사용할 때 to 값을 props로 넣어 주면 마치 Link 컴포넌트처럼 작동합니다.

components/common/Header.js

import React from 'react';
import styled from 'styled-components';
import Responsive from './Responsive';
import Button from './Button';
import { Link } from 'react-router-dom';

(...)

const Header = () => {
  return (
    <>
      <HeaderBlock>
        <Wrapper>
          <Link to="/" className="logo">
            REACTERS
          </Link>
          <div className="right">
            <Button to="/login">로그인</Button>
          </div>
        </Wrapper>
      </HeaderBlock>
      <Spacer />
    </>
  );
};

export default Header;

---

 

REACTERS라고 나타나는 로고에도 링크를 달고, Button 컴포넌트에도 링크를 달았습니다. 이제 헤더 컴포넌트에서 로그인 버튼을 눌렀을 때 페이지가 잘 이동하는지 확인해 보세요.