css - 为什么 <header> 之后的 div 没有显示在标题下方？

Question

我正在做一个 reactJS web 应用程序，我已经完成了页眉，但是当我想在页眉之后为内容添加一个 div 时，div 没有显示在页眉下面，我不明白为什么

奇怪的是，当我将我的 div 放在标题中时，div 正常显示在前一个元素下

function App() {
  return (
    <Router>
      <div className="App">
        <header>
          <Header/>
        </header>
        <div>
          <Route exact path="/" component={Real}></Route>
          <Route exact path="/makingof" component={MakingOf}></Route>
          <Route exact path="/contact" component={Contact}></Route>
        </div>
      </div>
    </Router>
  );
}

这是我的应用程序，这是我的简单组件

class Real extends React.Component {
    render() {
        return(
            <div className="divReal">
                <p>real</p>
            </div>
        )
    }
}

@import url('https://fonts.googleapis.com/css?family=Saira+Condensed:600&display=swap');

.Header {
    background-color: white;
    height: 20vh;
}

img {
    margin-top: 1rem;
    max-width: 80%;
    max-height: 80%
}

.iconWrapper {
    margin-top: 1rem;
}

.network {
    color: #000000 !important;
}

.network:not(:first-child) {
    margin: 0 0 0 1rem !important;
}

.network:hover {
    color: grey !important;
}

.iconTest {
    color: red !important;
}

.navBar {
    margin: 0 auto;;
    width: 50%;
    height: 4.4vh;
    margin-top: 2rem;
}

.menuNavBar {
    border: 1px solid black !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
    height: 4vh !important;
    min-height: 0 !important;
    font-size: 1.5rem !important;
}

.test {
    border-radius: 0;
    font-family: 'Saira Condensed', sans-serif;
    font-size: 100%;
}

.test:hover {
    background-color: black !important;
    color: white !important;
    cursor: pointer;
}

@media screen and (max-width: 1025px) {
    .navBar {
        width: 80%;
    }
    .menuNavBar {
        height: 4vh !important;
    }
}

谢谢你的帮助

Answer 1

错误::

<Route exact path="/" component={Real}></Route>

试试这个:::

<Route exact path="/real" component={Real}></Route>

react 默认加载/ 路由，所以你可以改变这个格式。