Блог

Главная - Вопросы по программированию - Как мне разделить состояние между маршрутами в React-Router?

Как мне разделить состояние между маршрутами в React-Router?

#reactjs #react-router #material-ui #react-router-dom

#reactjs #react-router #материал-пользовательский интерфейс #react-router-dom

Вопрос:

Я видел несколько вопросов, похожих на этот, на SO, но ни один из них не соответствовал моим потребностям. Я использую React и Material-UI для создания панели мониторинга. Я использую мини-вариант Material-UI в качестве боковой панели со ссылками, которые должны отображать маршруты при нажатии. Боковую панель можно открыть, нажав кнопку, которая обновляет переменную состояния и настраивает CSS className боковой панели. Это приводит к «скольжению» боковой панели / ящика.

Если я нажму на ссылку на боковой панели, я могу легко отобразить желаемый маршрут. Однако я не могу заставить маршрут также «скользить» в сторону при открытии боковой панели / ящика. Вероятно, это будет легче понять, посмотрев на код, поэтому я включил ссылку на codesandbox ниже:

https://codesandbox.io/s/appbar-with-react-router-bkogj?file=/src/App.js

Я в основном скопировал и вставил все с веб-сайта Material-UI (я полагаю, используя v4), затем добавил маршрут самостоятельно. Был бы признателен за любые отзывы о том, как решить эту проблему.

Комментарии:

1. вы смотрели на постоянный ящик mui? mui.com/components/drawers это действительно должно дать вам все, что вам нужно 🙂

Ответ №1:

Для этого я думаю MiniDrawer , что компоненту необходимо отображать содержимое, поскольку он обязательно знает о пространстве, которое занимают компоненты appbar и drawer.

Минидрайвер

Возьмите и отобразите children prop.

 export default function MiniDrawer({ children }) {
  ...

  return (
    <div className={classes.root}>
      <CssBaseline />
      <AppBar
        ...
      >
        ...
      </AppBar>
      <Drawer
        ...
      >
        ...
      </Drawer>
      <main className={classes.content}>{children}</main>
    </div>
  );
}

Приложение

Визуализируйте Outlet как дочерний компонент.

 export default function App() {
  return (
    <div className="App">
      <AppBar>
        <Outlet />
      </AppBar>
    </div>
  );
}

Отклоняемый

Удалите лишнее поле, чтобы оно заполнило область содержимого, разрешенную родительским компонентом.

 const useStyles = makeStyles((theme) => ({
  content: {
    flexGrow: 1,
    padding: theme.spacing(3),
    height: "100%",
    // marginLeft: "4em" // <-- remove
  }
}));

Редактировать как мне разделить состояние между маршрутами в react-router

Метки: