[react-router-dom@5] - Switch와 exact props

function App() {
  return (
    <>
      <MainHeader />
      <main>
        {/* Switch 컴포넌트는 해당 경로 중 하나만 활성화 되게 만들어준다.
            활성화의 기준은 가장 먼저 매칭되는 라우트가 된다.
            5버전에서는 특정 라우트가 더 구체적인지의 여부가 크게 중요하지 않다.
            그저 위에서 아래로 통과할 뿐이다.
            또한 일치하는 항목을 찾는다는 것은 경로의 시작 부분과 일치할 때를 의미한다.*/}
        <Switch>

      {/* /welcome,products path에 들어오면 Route 컴포넌트 내부에 있는 컴포넌트가 화면에 랜더 되게 만들어준다. */}
      <Route path="/welcome">
      <Welcome />
      </Route>
      {/* exact prop은 정확히 일치하는 경우에만 해당 컴포넌트를 로드하게 만들어준다.*/}
      <Route path="/products" exact>
        <Products />
      </Route>
     
      <Route path="/products/:productId">
      <ProductDetail />
      </Route>
      </Switch>
      </main>
    </>
  );
}

export default App;