react-router路由跳转返回首页时页面闪烁问题咨询

返回首页时的闪烁是两个问题共同导致的：

• react-router v6 默认不会在路由切换时自动重置全局滚动位置，从其他页面跳回首页时，滚动条大概率停留在非顶部的位置
• react-scroll-motion 的ScrollContainer挂载瞬间会读取当前滚动位置计算动效初始状态，拿到非预期的滚动值时会先渲染动效中间帧，等组件初始化校准完成后又跳回正确状态，就形成了肉眼可见的闪烁。另外你代码里把块级组件CardInfo嵌套在行内标签span里，会触发浏览器DOM纠错重排，进一步加剧闪烁问题。

按操作成本从低到高依次尝试即可：

• 第一步：添加路由全局滚动复位逻辑
  新建一个滚动复位组件，在路由路径变化时自动把滚动条拉回顶部：

  // src/Components/ScrollToTop.jsx
  import { useEffect } from 'react';
  import { useLocation } from 'react-router-dom';
  
  export default function ScrollToTop() {
    const { pathname } = useLocation();
    useEffect(() => {
      window.scrollTo(0, 0);
    }, [pathname]);
    return null;
  }
  

  把组件放到App.js的路由容器内部生效：

  // App.js 对应修改
  <BrowserRouter>
    <ScrollToTop />
    <Navbar />
    <Routes>
      <Route element={<Home />} path="/" />
      <Route element={<About />} path="/about" />
      <Route element={<Contact />} path="/contact" />
      <Route element={<Projects />} path="/projects" />
    </Routes>
    <Footer />
  </BrowserRouter>
  

• 第二步：修复不规范DOM嵌套
  把首页里两处包裹CardInfo的<span>标签替换为块级标签<div>，避免浏览器自动纠错触发的意外重排：

  // 原写法
  <span className="topicParagraph-font" style={{ fontSize: "40px" }}>
    <CardInfo />
  </span>
  // 修改为
  <div className="topicParagraph-font" style={{ fontSize: "40px" }}>
    <CardInfo />
  </div>
  

• 第三步：给动效容器加初始化缓冲（前两步做完仍有闪烁时再加）
  给首页组件加短延迟，等滚动位置完全复位后再渲染动效容器，避免初始化读取到错误滚动值：

  // Home.jsx 对应修改
  import React, { useState, useEffect } from "react";
  // 其余原有import保持不变
  
  function Home() {
    const [scrollReady, setScrollReady] = useState(false);
    useEffect(() => {
      window.scrollTo(0, 0);
      // 留50ms给浏览器完成滚动复位
      const timer = setTimeout(() => setScrollReady(true), 50);
      return () => clearTimeout(timer);
    }, []);
  
    if (!scrollReady) return null;
    return (
      <ScrollContainer>
        {/* 原有ScrollPage、Animator等内容全部保留 */}
      </ScrollContainer>
    )
  }
  
  export default Home;
  

小优化：如果还想彻底抹除初始化的瞬间视觉差，可以给ScrollContainer加初始透明样式，等挂载完成后再渐显，视觉上就完全不会有闪烁感。

内容的提问来源于stack exchange，提问作者mahdi