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>。我的导航栏是来自 material-ui / core 库的<Appbar position='fixed'>。

Answer 1

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

如果在Material UI AppBar上使用“固定放置”，则需要通过在Appbar下方包含第二个空|id| |3 | |2 | |1 |组件或使用<Toolbar /> CSS来偏移内容。

使用第二个theme.mixins.toolbar组件的解决方案A：

<Toolbar />

使用function App() { return ( <React.Fragment> <AppBar position="fixed"> <Toolbar>{/* content */}</Toolbar> </AppBar> <Toolbar /> </React.Fragment> ); }的解决方案B：

theme.mixins.toolbar

MUI还建议使用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> ) };来避免此问题；但是IE11不支持此功能，请谨慎使用。

ReactJS组件在导航栏后面

1 个答案: