더북(TheBook)

16.4.3 자바스크립트에서 라우팅

 

링크를 클릭하는 단순한 경우가 아니라, 자바스크립트에서 페이지를 이동해야 하는 로직을 작성해야 할 때도 있습니다. 예를 들어 로그인을 구현한다면 로그인이 성공했을 때 특정 경로로 이동시켜 주어야 하는데, Link 컴포넌트는 단순히 클릭했을 때 이동시키는 기능이므로 다른 방법을 사용해야 합니다.

자바스크립트로 라우팅을 하려면 라우트로 사용된 컴포넌트가 받아 오는 props 중 하나인 history 객체의 push 함수를 활용하세요.

src/pages/Home.js

import React from ‘react’;
 
const Home = ({history}) => {
  return (
    <div>
      <h2>홈</h2>
      <button onClick={() => {
        history.push(‘/about/javascript’)
      }}>자바스크립트를 사용하여 이동</button>
    </div>
  );
};
 
export default Home;

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.