React 기초 (8) : props를 이용해 redirect하기

route를 통해 이동한 페이지는 location, history와 같은 props를 자동으로 가집니다.

이 props를 이용해서 뒤로가기, 앞으로가기, 이동해 온 페이지의 정보를 재사용하는 것이 가능해집니다.

 

아래 코드는 location.state가 없으면(undefined) 곧장 /Home으로 리다이렉트 합니다.

 

import React from "react";

class Detail extends React.Component {
  componentDidMount() {
    const { location, history } = this.props; // 구조 분해 할당
    if (location.state === undefined) {
      history.push("/Home");
    }
  }
  render() {
    const { location } = this.props;
    if (location.state) {
      return <span>{location.state.title}</span>;
    } else {
      return null;
    }
  }
}

export default Detail;