// App.js
function App() {
  return (
    <BrowserRouter>
    <Route path="/" exact component={Home} />
    <Route path="/profile" exact component={Profile} />
		{/* : 콜론을 붙여줌으로써 동적으로 Routing 할 수 있다. */}
    <Route path="/profile/:id" component={Profile} />
    <Route path="/About" component={About} />
    </BrowserRouter>
  );
}

// Profile.jsx
// props 로 외부에서 값을 받아온다. Route 컴포넌트에 해당하는 Profile 만 받아온다.
export default function Profile(props) {
  const id = props.match.params.id;
  console.log(id, typeof id); // type 은 string 이다.
  return(
    <div>
      <h2>Profile 페이지 입니다.</h2>
      {id && <p> id 는 {id} 입니다.</p>}
    </div>)
}

optional 한 입력값인 query string 으로 Routing 해보자.
위의 방식처럼 Component 를 추가 할 필요없다.
<http://localhost:3000/About?name=malza>
위의 url 은 About 과 같다. 따라서 추가적으로 Route 처리 할 필요없다.
name 을 꺼내와 보자.

1. 브라우저에 내장되어있는 객체 URLSearchParams 를 사용할 수 있다.

// About.jsx
export default function About(props) {
  const searchParams = props.location.search;
  console.log(searchParams);
  const obj = new URLSearchParams(searchParams);
  console.log(obj.get('name')); // malza
  return <div>About Page!</div>
}

URLSearchParams 의 단점은 method를 기억해야 하고, 지원하지 않는 브라우저도 있다.

둘의 단점을 극복하기 위해 query string 을 사용하겠다.
$ npm i query-string -S

// Abount.jsx
import queryString from 'query-string';

export default function About(props) {
  const searchParams = props.location.search;
  console.log(searchParams);
  // const obj = new URLSearchParams(searchParams);
  // console.log(obj.get('name'));
  const query = queryString.parse(searchParams);
  console.log(query);
  return (
  <div>
    <h2>About Page!</h2>
    {query.name && <p>name은 {query.name} 입니다.</p>}
  </div>)
}