Как правильно рендерить страницы в реакт?

Question

[Марат Иванов]

Вопрос от чайника, есть приложение, с тремя блоками хедер, боковое меню, контент.
роутер стоит над всем этим в App.js. Большинство страниц собираю импортнув все три блока. А некоторые страницы без бокового меню к примеру. Но в итоге боковое меню когда оно нужно - грузится заново, стирая активный класс. Как сделать так чтоб меню не обновлялось при подгрузке? Спасибо.

тип большинства страниц:

...
  return (
    <Page wide={true}>
      <Header />
      <LeftMenu />
      <Overview />
    </Page>
  );
};

Comments

[Петр Мухуров]

Если оно грузится заново, стирая активный класс, значит неверно настроен роутинг или неверно заюзано меню на роуты

[Марат Иванов]

Петр Мухуров, роут тут врядли причем, он же странцу грузит. Суть вопроса в том чтоб меню оставить без изменений с активным классом. Как решение - вынести меню за роут, и не подгружать его, но тогда другие страницы без меню необходимо грузить в реакт.порталах например.

[Петр Мухуров]

Айрат Мухаметшин, в AntdMenu нужно отдавать
selectedKeys={[match.path]}
а AntdMenu.Item ключ должен совпадать с урлом, тогда меню само будет делаться активным в зависимости от роута

[Марат Иванов]

Петр Мухуров, Спасибо!!!!

Answer 1

[Владимир]

Идеальный вариант - сохранять состояние меню не в стейте а в контексте или в redux сторе
https://reactjs.org/docs/context.html
https://redux.js.org/basics/usage-with-react

Comments

[Марат Иванов]

https://ant.design/components/layout/#components-l... - менюшка взята, и что там под капотом я не знаю. наверняка я не первый кто ее юзает.

[Владимир]

Айрат Мухаметшин, Есть повод заглянуть под капот.

[sinneren]

А нормально ли для визуального оформления использовать контекст, а для бизнес-логики уже ридакс? То есть совмещать

[Петр Мухуров]

sinneren, вполне нормально хранить данные отдельно от вещей, отвечающих исключительно за представление

[hzzzzl]

sinneren, нафик, потому что

Internally, React Redux uses React's "context" feature

https://react-redux.js.org/using-react-redux/acces...

[Владимир]

hzzzzl, Тоже не могу понять зачем мешать похожие технологии.

[Антон Спирин]

hzzzzl, Владимир, на самом деле очень удобно. Используем сейчас для передачи device в SSR приложении:

const Foo () => {
  const { isMobile, device } = useContext(MainContext);
  reutrn ( ... );
};

До этого еще в кроссплатформенном коде для чего-то вроде DI использовали. Когда прокидываешь в разных точках входа разные компоненты под одним и тем же ключом в контекст. На выходе имеешь универсальный код.

const Foo = props => {
  const { Foo: F } = useContext(MainContext);
  return <Foo {...props} />;
};

Получаем компонент, который имеет на разных платформах разные реализации. Не назвал бы это хорошей практикой, но в нашем конкретном случае помогло без лишних телодвижений сократить размер web бандла.

Ну и многие библиотеки так же используют контекст: react-router, styled-components, react-i18next и прочие.
Назначение у Context и Redux как не крути разное.

[Владимир]

Антон Спирин, Так а кто мешает просто завязать все на контекст в этом случае и убрать редакс ?

[Антон Спирин]

Владимир, у инструментов разное назначение. Redux - хранилище состояния и имеет соответствующий интерфейс для его изменения, получения и подписки на обновление, а react-redux набор удобных инструментов для использования с React. Context API - позволяет лишь удобно передавать какие-то значения вниз по древу. Использовать его для полноценного state management реально, но неудобно. В то же время, использовать Redux для передачи какого-нибудь статичного isMobile и browser - оверхэд.
По-хорошему, каждому инструменту своя задача.