exxxcitation1
@exxxcitation1
Ваше Эникейшество

Как переотрисовать функциональный компонент после изменения роута?

Есть код такого типа:
const ContenWrapper: FC<ElementsIds> = memo(({ ids }) => {
  const DashboardContent = () => (
    <>
      <TitleStyled id={ids.content.contentTitleId}>
        {messages.title.default}
      </TitleStyled>
      <DescriptionStyled id={ids.content.contentDesctiptionId}>
        {messages.description.default}
      </DescriptionStyled>
    </>
  );

  const GameContent = () => <TitleStyled>{"блаблабла"}</TitleStyled>;

  return (
    <ContentWrapperStyled id={ids.content.contentWrapperId}>
      <ScrollWrapperStyled id={ids.content.contentScrollWrapperId}>
        <Route path="/" render={DashboardContent} />
        <Route path="/game" render={GameContent} />
      </ScrollWrapperStyled>
    </ContentWrapperStyled>
  );
});


В другом компоненте по клику на кнопку меняется роут.
В данном случае в зависимости от роута просто ДОрисовывается то, что указано в render.

Как сделать так, чтобы при изменении роута перерисовывался сам ContenWrapper?
  • Вопрос задан
  • 57 просмотров
Решения вопроса 1
Raxen
@Raxen
Senior Frontend Developer, X5 Retail Group
Можно использовать хук роутера useLocation()

Идея такая - подтягиваем хук, оборачиваем нужное место, которое должно ререндерится в useMemo с зависимостью от хука роутера

Например -
// импортируем хук useMemo
import { useMemo } from "react";
// импортируем хук useLocation
import { useLocation } from "react-router-dom";

const ContenWrapper: FC<ElementsIds> = memo(({ ids }) => {
  // Добавляем хук перемещений
  const { pathname } = useLocation();

  // Если нужен например этот компонент, чтоб ререндерились изменения, оборачиваем в хук useMemo
  const DashboardContent = useMemo(
    () => (
      <>
        <TitleStyled id={ids.content.contentTitleId}>
          {messages.title.default}
        </TitleStyled>
        <DescriptionStyled id={ids.content.contentDesctiptionId}>
          {messages.description.default}
        </DescriptionStyled>
      </>
    ), 
    [pathname] // Зависимость, при изменении которой произойдет ререндер
  );

  const GameContent = () => <TitleStyled>{"блаблабла"}</TitleStyled>;

  return (
    <ContentWrapperStyled id={ids.content.contentWrapperId}>
      <ScrollWrapperStyled id={ids.content.contentScrollWrapperId}>
        <Route path="/" render={DashboardContent} />
        <Route path="/game" render={GameContent} />
      </ScrollWrapperStyled>
    </ContentWrapperStyled>
  );
});


Только непонятно зачем если один компонент идет в один роут, а другой на другой, а на фоне они не работают
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы