javascript - 使用 react-router 路由后，样式的 glidejs 动态计算被破坏

Question

使用 glidejs，初始加载一切正常，但是当单击滑块时，样式被破坏。我检查并发现当通过 React-router 路由页面时缺少样式属性，当刷新页面样式属性放置在那里时。

我知道它是因为内部计算了 jsx 元素的大小，但不知道如何修复它

应用程序.js

import Glide from '@glidejs/glide'

const defaultOptions = {
  type: 'slider',
  startAt: 0,
  perView: 3,
  gap: 20,
  bound: true,
  rewind: false,
  breakpoints: {
    768: { perView: 2 },
    540: { perView: 1 },
  },
}
const App = ({ element = 'glide', options = defaultOptions, children }) => {
  const [glide] = useState(
    new Glide(`.${element}`, { ...defaultOptions, ...options })
  )

  useEffect(() => {
    glide.mount()
    return () => {
      glide.destroy()
    }
  }, [glide])
        ...
        <div className="glide__slides">
        {items.map((recipe) => (
                          <div
                            className="glide__slide"
                            key={item.Id}
                         //style={{ width: '322.5px', marginRight: '10px' }} this code are not here when route via react-router
                          >
                          </div>
                        ))}
        </div>

Slider.module.scss

 @use '@/scss/mixins';
    
    .glideArrows {
      align-items: center;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
      z-index: 2;
    }
    
    .glideArrowLeft {
      display: none;
      @include mixins.is-desktop {
        display: block;
        left: -4rem;
        position: absolute;
      }
    }
    
    .glideArrowRight {
      display: none;
      @include mixins.is-desktop {
        display: block;
        position: absolute;
        right: -4rem;
      }
    }