React/React Router：特定路由首次导航判断及首页事件监听初始化问题

这个需求我之前做项目时刚好碰到过，结合React Router的路由状态和React的状态管理就能完美实现。核心就是要区分「首次从/路由启动应用」和「从其他路由跳转至/」这两种场景，然后在合适的时机初始化window事件监听器。我给你梳理一下具体的实现方案：

核心思路 #

我们需要追踪两个关键状态：

• isFirstVisitHome：标记是否是首次启动应用且直接进入了/路由
• isSplashClosed：标记启动页是否已经被用户关闭

然后基于这两个状态：

1. 只有当isFirstVisitHome为true且isSplashClosed为false时，才显示启动页
2. 当启动页关闭（isSplashClosed变为true），或者用户是从其他路由进入/时，就初始化window事件监听器，同时要避免重复绑定监听器

具体实现代码 #

下面是完整的示例代码，我会逐行解释关键逻辑：

import { useState, useEffect } from 'react';
import { Routes, Route, useLocation } from 'react-router-dom';
import Home from './Home';
import OtherPage from './OtherPage';
import SplashPage from './SplashPage';

function App() {
  const location = useLocation();
  // 记录是否是首次启动且进入首页
  const [isFirstVisitHome, setIsFirstVisitHome] = useState(false);
  // 记录启动页是否已关闭
  const [isSplashClosed, setIsSplashClosed] = useState(false);

  // 页面初始化时判断初始路由
  useEffect(() => {
    // 只有当当前路由是/，且还没标记过首次访问时，才设置状态
    if (location.pathname === '/' && !isFirstVisitHome) {
      setIsFirstVisitHome(true);
    }
  }, [location.pathname, isFirstVisitHome]);

  // 初始化window事件监听器的函数，先移除再添加避免重复绑定
  const initWindowListeners = () => {
    // 先移除旧的监听器（防止重复绑定）
    window.removeEventListener('resize', handleResize);
    window.removeEventListener('scroll', handleScroll);
    
    // 添加新的监听器
    window.addEventListener('resize', handleResize);
    window.addEventListener('scroll', handleScroll);
  };

  // 示例：窗口 resize 处理逻辑
  const handleResize = () => {
    console.log('窗口大小改变了');
    // 这里写你的业务逻辑
  };

  // 示例：页面滚动处理逻辑
  const handleScroll = () => {
    console.log('页面滚动了');
    // 这里写你的业务逻辑
  };

  // 监听状态变化，在合适时机初始化监听器
  useEffect(() => {
    // 两种情况需要初始化监听器：
    // 1. 首次访问首页且启动页已关闭；2. 不是首次访问首页（从其他路由进入/）
    if ((isFirstVisitHome && isSplashClosed) || !isFirstVisitHome) {
      initWindowListeners();
    }

    // 组件卸载时移除监听器，防止内存泄漏
    return () => {
      window.removeEventListener('resize', handleResize);
      window.removeEventListener('scroll', handleScroll);
    };
  }, [isFirstVisitHome, isSplashClosed]);

  // 关闭启动页的回调函数
  const handleCloseSplash = () => {
    setIsSplashClosed(true);
    // 如果需要，这里可以添加启动页关闭后的额外逻辑，比如滚动到首页顶部等
  };

  return (
    <div className="app-container">
      {/* 只有首次访问首页且启动页未关闭时，渲染启动页 */}
      {isFirstVisitHome && !isSplashClosed && (
        <SplashPage onClose={handleCloseSplash} />
      )}
      
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/other-page" element={<OtherPage />} />
        {/* 其他路由... */}
      </Routes>
    </div>
  );
}

export default App;

关键逻辑解释 #

1. 初始路由判断：通过useLocation获取当前路由，在组件挂载时检查是否是/，如果是就标记isFirstVisitHome为true——这个状态只会在首次启动时设置一次，后续从其他路由跳转回/时不会再改变。
2. 启动页显示控制：只有当isFirstVisitHome为true且isSplashClosed为false时，才渲染启动页，完美区分了两种场景。
3. 事件监听器初始化：在useEffect中监听isFirstVisitHome和isSplashClosed的变化，满足条件时调用initWindowListeners。初始化时先移除旧的监听器，避免重复绑定；组件卸载时也要移除监听器，防止内存泄漏。

额外注意事项 #

• 如果你的应用需要全局共享这些状态（比如多个组件需要判断启动状态），可以把isFirstVisitHome和isSplashClosed放到React Context或者Redux中管理，方便其他组件访问。
• 如果你担心页面刷新后状态丢失（比如用户刷新首页），可以把isSplashClosed存到localStorage中，这样刷新后也不会重复显示启动页——不过这取决于你的业务需求，用户没提的话可以不用加。
• 启动页组件SplashPage只需要接收一个onClose回调，点击关闭按钮时调用这个回调即可，逻辑很简单。

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