ReactJS 組件落后於導航欄

Question

在我的 React 應用程序中，頂部有一個導航欄。 我在 App.js 中調用這個 Navbar 組件，如下所示。

export default function App() {
   return (
      <Router>
         <Fragment>
            <Navbar />
            <Route exact path="/" component={Home} />
            <section>
               <Switch>
                  <Route exact path="/login" component={Login} />
                  <PrivateRoute exact path="/dashboard" component={Dashboard} />
               </Switch>
            </section>
         </Fragment>
      </Router>
   );
}

問題是，每當我點擊這些 URL 中的任何一個，例如“/login”、“/dashboard”，與它們關聯的組件呈現在導航欄后面而不是在導航欄下方。 雖然我可以在<Navbar />下方添加多個<br/>標簽來將這些組件移動到下方，但這似乎不是一個好的解決方案，因為某些組件上方已經有大量空白，添加<br/>將進一步移動它們低於我不想要的。 如何解決這個問題？ 我的其他組件返回簡單的<div> 。 我的<Appbar position='fixed'>是來自material-ui/core庫的<Appbar position='fixed'> 。

Answer 1

官方 Material UI 文檔詳細介紹了這個特定問題： https : //material-ui.com/components/app-bar/#fixed-placement

如果您在 Material UI AppBar 上使用 Fixed Placement，您將需要通過在 appbar 下方包含第二個空<Toolbar />組件或使用theme.mixins.toolbar CSS 來偏移您的內容。

---

使用第二個<Toolbar />組件的解決方案 A：

function App() {
  return (
    <React.Fragment>
      <AppBar position="fixed">
        <Toolbar>{/* content */}</Toolbar>
      </AppBar>
      <Toolbar />
    </React.Fragment>
  );
}

---

解決方案 B 使用theme.mixins.toolbar ：

const useStyles = makeStyles(theme => ({
  offset: theme.mixins.toolbar,
}))

function App() {
  const classes = useStyles();
  return (
    <React.Fragment>
      <AppBar position="fixed">
        <Toolbar>{/* content */}</Toolbar>
      </AppBar>
      <div className={classes.offset} />
    </React.Fragment>
  )
};

---

MUI 還建議使用position="sticky"來避免這個問題； 但是，IE11 不支持此功能，因此請謹慎使用。