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

Question

[Александр Жарченко]

Есть код такого типа:

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?

Answer 1

[Роман Дворянов]

Можно использовать хук роутера 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>
  );
});

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

Comments

[Alexandroppolus]

[pathname] // Зависимость, при изменении которой произойдет ререндер

ids туда ещё

а по хорошему, DashboardContent надо бы отдельным memo-компонентом, и в нем уже useLocation