Next.js路由状态同步异常：根路径默认跳转至contacts并修改本地存储

开发者阿泽

2026-7-7

问题解决：访问根路径时自动添加section参数的问题

你遇到的问题是访问根路径localhost:3000时，页面会自动跳转到/?section=contacts，同时本地存储被写入contacts值。核心原因是初始化时currentSection被设为默认值contacts，触发了监听状态变化的useEffect，进而执行了路由跳转和本地存储写入操作。

解决方案

通过添加初始加载标记，区分「初始化默认值设置」和「用户主动操作的状态变化」两种场景：

新增初始加载状态：

const [isInitialLoad, setIsInitialLoad] = useState(false);

修改第一个初始化useEffect，标记是否为无参数/无存储的初始加载：

useEffect(() => {
  if (router.isReady) {
    const sectionFromURL = router.query.section;
    const sectionFromStorage = localStorage.getItem('section');
    const chatFromStorage = localStorage.getItem('chat');
    
    setCurrentSection(sectionFromURL || sectionFromStorage || 'contacts');
    setSelectedChat(chatFromStorage || null);
    // 标记：无URL参数且无本地存储时为初始加载
    setIsInitialLoad(!sectionFromURL && !sectionFromStorage);
  }
}, [router.isReady]);

修改第二个状态监听useEffect，跳过初始加载时的路由和存储更新：

useEffect(() => {
  // 初始加载且无参数/存储时，不执行更新操作
  if (isInitialLoad) {
    setIsInitialLoad(false);
    return;
  }

  if (router.isReady) {
    localStorage.setItem('section', currentSection);
    router.push({
      pathname: router.pathname,
      query: { section: currentSection },
    });
  }

  if (selectedChat) {
    localStorage.setItem('chat', selectedChat);
  }
}, [currentSection, selectedChat, router.isReady, isInitialLoad]);