Индикатор React Material Tabs не отображается при первой загрузке

Question

У меня есть простая настройка вкладок с пользовательским интерфейсом React Material (https://material-ui.com/components/tabs/), в которой значение пути устанавливается динамически

export const Subnav: React.FC<Props> = ({ routes = [] }) => {
  const { pathname } = useLocation();
  const { push } = useHistory();    
  const handleChange = (e: ChangeEvent<{}>, path: string) => push(path);

  return (
    <Tabs
      indicatorColor="primary"
      onChange={handleChange}
      scrollButtons="auto"
      textColor="primary"
      value={pathname}
      variant="scrollable"
    >
      {routes.map(r => (
        <Tab label={r.name} value={r.path} />
      ))}
    </Tabs>
  );
};

Когда я впервые загружаю страницу / перехожу на нее из вкладок маршрутов выбрана правильная вкладка, но индикатор не отображается. Чтобы индикатор показывался, мне нужно снова щелкнуть ту же вкладку или выбрать другую.

Answer 1

Это было решено с помощью https://github.com/mui-org/material-ui/issues/20527

Вам необходимо вручную запустить метод updateIndicator. Самый простой способ сделать это - вызвать событие resize (которое вызывает метод)

useEffect(() => {
    window.dispatchEvent(new CustomEvent("resize"));
  }, []);

В качестве альтернативы можно добавить ref в prop действий и вызвать метод напрямую. Все еще кажется неидеальным решением, но это то, что предоставил сопровождающий.