1. match

URL 파라미터를 사용할 때
ex) localhost:3000/profile/hemtory

console
isExact: true
params: {username: "hemtory"}
path: "/profiles/:username"
url: "/profiles/hemtory"

import React from 'react';

const data = {
  hemtory: {
    name: '햄토리',
    info: '리액트'
  },
  lhh: {
    name: '이호현',
    info: '난섬세하다고'
  }
};

const Profile = ({ match }) => {
  const { username } = match.params;
  const profile = data[username];

  if(!profile) {
    return <div>존재하지 않는 사용자</div>
  }

  return (
    <div>
      <h3>{username}({profile.name})</h3>    
      <p>{profile.info}</p>
    </div>
  );
};

export default Profile;

match 객체에서 param을 확인해보면 username에 파라미터를 저장하도록 되어있다. param을 이용해서 url에 있는 파라미터값을 이용할 수 있다.

2. location

URL 쿼리를 사용할 때
console
hash: ""
pathname: "/about"
search: "?detail=true"
state: undefined

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

const About = ({location}) => {
  const query = qs.parse(location.search, {
    ignoreQueryPrefix: true
  });

  const detail = query.detail === 'true';

  return (
    <div>
      <h1>소개</h1>
      <p>어바웃입니다.</p>
        {detail && <p>detail값이 true 입니다</p>}
    </div>
  );
};

export default About;

location 객체에서 search 확인해보면 "?detail=true" 이렇게 querystring을 받아올 수 있다.
ignoreQueryPrefix: true을 사용하면 querystring에서 ?를 무시할 수 있다.