display flex 및 link가 제대로 작동 안합니다...ㅠ

안녕하세요! 두 가지 질문이 있어서 글 남깁니다.

1. display flex가 특정 id에 적용이 안됩니다 ㅠㅠ

app.js에서 id=header인 부분에 css를 적용시켰는데 딱 header 부분만 적용이 안됩니다. 코드는 아래와 같습니다.

app.js 코드

import logo from './logo.svg';
import './App.css';
import MainPageComponent from "./main/index.js"
import React, { Component }  from 'react';
import {Link, Switch, Route, useHistory} from 'react-router-dom'
import UploadPage from './upload/index.js';
import ProductPage from './product/index.js';
import { Button } from 'antd';
import {DownloadOutlined} from '@ant-design/icons'

function App() {
  const history = useHistory();
  return (
    <div>
      <div id="header">
        <div id="header-area">
              <Link to="/">
                <img src="/images/icons/logo.png" />
              </Link>
              <Button size="large" onClick={function(){
                history.push('/upload');
              }} icon={<DownloadOutlined />}
              >
                상품 업로드
              </Button>
          </div>
      </div>
      <div id="body">
      <Switch>
        <Route exact={true} path="/">
          <MainPageComponent />
        </Route>
        <Route exact={true} path="/products/:id">
          <ProductPage />
        </Route>
        <Route exact={true} path="/upload">
          <UploadPage />
        </Route>
      </Switch>
      </div>
      <div id="footer"></div>
    </div>
  );
}

export default App;

app.css

* {
  margin: 0;
  padding: 0;
  line-height: normal;
}

html, 
body, 
#root, 
#root > div {
  height: 100%;
};

#header {
  height: 64px;
  /*가운데 정렬하는 방법*/
  display: flex;
  justify-content: center;
  border-bottom: 1px solid gray;
}

#header-area {
  width: 1024px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#header-area img {
  width: 128px;
  height: 36px;
}

#body {
  height: 100vh;
  width: 1024px;
  margin: 0 auto; /*가운데 정렬하는 방법 중 하나*/
  padding: 24px;
}

#footer {
  height: 200px;
  background-color: rgb(230,230,230);
}

이렇게 했을 때 아래와 같이 header만 적용이 안됩니다...(header-area는 css가 잘 적용이 되네요)

2. Link 제대로 작동 안됨

Link 태그를 통해 상품 상세페이지로 넘어가는 코드를 구현했는데 잘 안되는 부분이 있습니다 ㅠㅠ 원래라면 상품 카드를 눌렀을 때 자동으로 상품 상세페이지로 넘어가면서 해당 페이지 내용이 나타나야하는데 저는 카드를 누르면 url 주소만 바뀌고 제가 수동으로 새로고침을 해야 해당 페이지로 넘어갑니다...(그랩마켓 로고를 눌렀을 때 메인페이지로 돌아가는 것도 마찬가지입니다) 위 코드에서 잘못된 부분이 어떤거길래 이렇게 되는걸까요...?

감사합니다!