React路由组件弹窗重复触发，如何避免useEffect引发该问题？

一、为什么访问/messages时alert触发两次？ #

1. 组件定义位置错误：你把Messages组件定义在了App组件内部，每次App组件重新渲染（比如你在useEffect里调用setTest导致App重渲染），都会创建一个全新的Messages组件。路由匹配时，新的组件会被重新挂载，加上React 18开发环境下的Strict Mode会强制组件执行两次渲染（用于检测副作用），最终导致alert触发两次。
2. 组件顶层的副作用：alert直接写在Messages组件的顶层代码中，组件每一次渲染都会执行这段代码，而不是只在挂载时执行。

二、修复步骤 #

1. 解决alert两次触发的问题 #

• 将Messages组件移到App外部定义：
  把Messages组件从App组件内部抽出来，这样组件只会被创建一次，不会随App的重渲染而重新生成：

  // 移到App组件外面
  import React, { useEffect } from 'react';
  
  const Messages = () => {
    // 用useEffect包裹alert，只在组件挂载时执行一次
    useEffect(() => {
      alert('This is the Messages component!!!!!!!!');
    }, []);
  
    return null; // 或你需要的JSX内容
  };
  
  function App({ count, increment, decrement }) {
    // ... 原App组件代码
  }
  

• 用useEffect包裹副作用代码：
  组件顶层的代码会在每次渲染时执行，把alert放到useEffect中并设置空依赖数组，就能保证只在组件挂载时触发一次。

2. 避免useEffect触发路由相关的异常重复渲染 #

• 正确设置useEffect的依赖数组：
  永远不要忽略useEffect的依赖，若需要监听路由变化，可借助useLocation，并将其加入依赖数组：

  import { useLocation } from 'react-router-dom';
  
  function App(...) {
    const location = useLocation();
  
    useEffect(() => {
      // 路由变化时执行的逻辑
      console.log('当前路由:', location.pathname);
    }, [location]); // 依赖location，路由变化时才触发
  }
  

• 禁止在组件内部定义组件：
  像你之前把Messages放在App内部的做法会导致组件重复创建，引发不必要的重渲染和挂载，所有组件都应该定义在外部作用域。
• Strict Mode说明：
  React 18的Strict Mode在开发环境下会双重渲染组件来检测副作用，生产环境不会有这个行为，无需刻意关闭，只要副作用代码符合React规范即可避免异常触发。

额外清理建议 #

你的index.js里导入了BrowserRouter但未使用，App内已经通过BrowserRouter as Router实现了路由功能，可删除index.js中冗余的BrowserRouter导入。

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