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 不支持此功能，因此请谨慎使用。