我正在尝试做一个导航栏，在链接的底部有一个滑块指示器。我正在使用react-router-dom中的导航和导航链接来显示我在导航栏中的链接。
下面是代码：

import React, { useEffect, useRef, useState } from 'react';
import { Nav } from 'react-bootstrap';
import { NavLink, useLocation } from 'react-router-dom';
import I18nWrapper from '../i18n-wrapper';

const usePathname = () => {
  const location = useLocation();
  return location.pathname;
};

const MenuLinks = () => {
  const pathName = usePathname();
  const [activeIndex, setActiveIndex] = useState(0);
  const indicatorRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
    // I move slider and setActiveIndex when I change the page
    if (pathName === '/a') {
      setActiveIndex(0);
      moveSlider(0);
    }
    if (pathName === '/b') {
      setActiveIndex(1);
      moveSlider(1);
    }
    if (pathName === '/c') {
      setActiveIndex(2);
      moveSlider(2);
    }
  }, [activeIndex, pathName, indicatorRef]);
  const moveSlider = (index: number) => {
    const indicator = indicatorRef.current;
    if (indicator) {
      const tab = indicator.parentElement?.children[index] as HTMLElement;
      // When I log here, the "tab.offsetLeft" is not the same as if I log "indicator.parentElement?.children" and check the offsetLeft in the children
      indicator.style.width = `${tab.offsetWidth}px`;
      indicator.style.transform = `translateX(${tab.offsetLeft - 218}px)`;
    }
  };

  return (
    <Nav className="me-auto ms-4">
      <NavLink to="/a" activeClassName="active-page">
        <I18nWrapper translateKey="a" />
      </NavLink>
      <NavLink to="/b" activeClassName="active-page">
        <I18nWrapper translateKey="b" />
      </NavLink>
      <NavLink to="/c" activeClassName="active-page">
        <I18nWrapper translateKey="c" />
      </NavLink>
      <div className="menu-border-bottom" ref={indicatorRef}></div>
    </Nav>
  );
};
export default MenuLinks;

正如我在注解代码中所说：当我在这里记录（moveSlider函数）时，“tab.offsetLeft”与如果我记录“indicator.parentElement？.children”并检查子元素中的offsetLeft是不一样的
选项卡左偏移（371）：

indicator.parentElement？.children（517）（当然检查相应的索引）：

这个问题的UI结果是，滑块指示器在错误的标签底部，其宽度不完美。但是一旦我的页面加载，如果我切换标签，这个工作完美。
你知道吗？