qs 라이브러리 사용해서 URL 쿼리 읽기

import React from 'react';
import qs from 'qs';

const About = ({ location }) => {
  const query = qs.parse(location.search, {
    ignoreQueryPrefix: true
    // 문자열 맨 앞의 ?를 생력
  });
  const showDetail = query.detail === 'true';
  // 쿼리의 파싱 결과 값은 무조건 문자열
  return (
    <div>
     <h1>소개</h1>
     {showDetail && <p>detail 값을 true로 설정하셨군요!</p>}
    </div>
  );
}

import React, { Component } from 'react';

class HistorySample extends Component {

  // 뒤로 가기
  handleGoBack = () => {
    this.props.history.goBack();
  };

  // 홈으로 이동
  handleGoHome = () => {
    this.props.history.push('/');
  };

  componentDidMount() {
    // 페이지 변화가 생기려고 할 때마다 정말 나갈 것인지를 질문
    this.unblock = this.props.history.block('정말 떠나실 건가요?');
  }

  componentWillUnmount() {
    // 컴포넌트가 언마운트되면 질문 멈춤
    if(this.unblock) {
      this.unblock();
    }
  }

  render() {
    return(
      <div>
        <button onClick={this.handleGoBack}>뒤로</button>
        <button onClick={this.handleGoHome}>홈으로</button>
      </div>
    );
  }
}

export default HistorySample;

import React from 'react';
import styled from 'styled-components';

const ItemBlock = styled.div`
  display: flex;
  .thumbnail {
    margint-right: 1rem;
    img {
      display: block;
      width: 160px;
      height: 160px;
      object-fit: cover;
    }
  }
`;

const Item = () => {
  const url = 'https://google.com';
  const urlToImage = 'https://via.placeholder.com/160';

  return (
    <ItemBlock>
      <div className="thumbnail">
        <a href={url} target="_blank" rel="noopener noreferrer">
          <img src={urlToImage} alt="thumbnail"/>
        </a>
      </div>
    </ItemBlock>
  );
};

export default Item;