ReactJS компонент, идущий за Навбаром - PullRequest
Новая
       33

ReactJS компонент, идущий за Навбаром

2 голосов
/ 05 января 2020

В моем приложении React вверху есть панель навигации. Я вызываю этот компонент Navbar в приложении. js, как показано ниже. 

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, связанный компонент с ними рендерится за навбар, а не под ним. Хотя я могу добавить несколько <br/> тегов ниже <Navbar />, чтобы переместить эти компоненты ниже, но это не кажется хорошим решением, поскольку некоторые компоненты уже имеют значительные пробелы над ними, и добавление <br/> сместит их еще ниже, чем я. не хочу Как решить эту проблему? Мои другие компоненты возвращают простой <div>. Мой Navbar - это <Appbar position='fixed'> из библиотеки material-ui / core .

1 Ответ

0 голосов
/ 05 января 2020

Официальная документация по пользовательскому интерфейсу материала подробно описывает эту конкретную проблему c: https://material-ui.com/components/app-bar/#fixed -расположение

Если вы используете фиксированное размещение в панели приложения пользовательского интерфейса материала, вам необходимо сместить ваш контент, включив второй пустой <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, поэтому используйте его с осторожностью.

...