javascript - 导航栏后面的 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>
   );
}

问题是，每当我点击“/login”、“/dashboard”等这些 URL 中的任何一个时，与它们关联的组件就会呈现在导航栏后面，而不是在导航栏下方。虽然我可以添加多个 <br/>下面的标签 <Navbar />将这些组件移到下面，但这似乎不是一个好的解决方案，因为某些组件上面已经有明显的空白并添加 <br/>会将它们进一步移动到我不想要的下方。如何解决这个问题？我的其他组件返回简单 <div> .我的导航栏是 <Appbar position='fixed'>来自 ma​​terial-ui/core 库。

Answer 1

官方 Material UI 文档详细介绍了这个特定问题:https://material-ui.com/components/app-bar/#fixed-placement

如果您在 Material UI AppBar 上使用 Fixed Placement，您将需要通过包含第二个空 <Toolbar /> 来偏移您的内容应用栏下方的组件或使用 theme.mixins.toolbar CSS。

---

解决方案 A 使用第二个 <Toolbar />组件:

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