React-Router中useEffect更新状态导致组件重复渲染如何解决？

你的实现思路确实存在逻辑漏洞，和useEffect本身无关，核心原因有两点：

• Redux中user状态的初始值为空，App首次渲染必然走「未登录」分支，等组件挂载后才通过useEffect读取本地存储、同步用户状态，状态更新后触发二次渲染，切到「已登录」分支
• 你在未登录、已登录两个分支下返回了两套完全独立的<Routes>组件树，哪怕两棵树里都定义了同路径的<Player />路由，React在虚拟DOM diff时会判定两个<Player />属于完全不同的节点位置，会直接卸载第一次渲染的旧Player实例，重新挂载新的Player实例，直接导致组件内部的useEffect、数据请求等逻辑重复执行。

按推荐优先级从高到低排列：

方案1：Redux初始化时直接读取本地用户信息（根治方案，最推荐） #

不要等App组件挂载后才读取localStorage同步状态，直接在Redux初始化阶段就读取本地存储的用户信息作为user状态的初始值，从根源上消除首屏user为空的中间态，避免二次渲染切换分支。
修改user reducer的初始值逻辑即可：

// reducers/user.js
// 模块加载时直接读取本地存储，不需要等组件挂载
const loggedUserJSON = window.localStorage.getItem('loggedUser')
const initialUserState = loggedUserJSON ? JSON.parse(loggedUserJSON) : null

export default function userReducer(state = initialUserState, action) {
  // 原有loginUser、logoutUser的处理逻辑保持不变
  switch (action.type) {
    // 保留你原有的action处理逻辑
    default:
      return state
  }
}

改完后App第一次渲染时就能拿到正确的用户状态，不会先渲染未登录分支再切登录分支，组件自然不会重复挂载。

方案2：合并路由树+增加初始化加载态（适合需要做异步用户校验的场景） #

如果后续你需要替换localStorage为接口请求校验登录态（比如拿token拉取用户信息），没法在Redux初始化时同步拿到用户状态，可以把两套分离的路由树合并为一套，同时增加初始化加载标记，在用户状态确认前不渲染路由内容：

import { useEffect, useState } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { Routes, Route } from "react-router-dom"
import { loginUser, logoutUser } from './reducers/user';
import Login from './components/Login';
import Player from './components/Player';

function App() {
  const dispatch = useDispatch()
  const user = useSelector(state => state.user)
  // 标记本地用户信息是否初始化完成
  const [initFinished, setInitFinished] = useState(false)

  useEffect(() => {
    const loggedUserJSON = window.localStorage.getItem('loggedUser')
    if (loggedUserJSON) {
      const user = JSON.parse(loggedUserJSON)
      dispatch(loginUser(user))
    }
    setInitFinished(true)
  }, [dispatch])

  // 初始化未完成时，渲染全局加载占位，不挂载任何路由组件
  if (!initFinished) {
    return <div>加载中...</div>
  }

  // 全局只保留一套Routes树，登录态差异用条件渲染处理
  return (
    <div>
      {user && (
        <h1>
          <button onClick={() => dispatch(logoutUser())}>LOG OUT</button>
        </h1>
      )}
      <Routes>
        <Route path="/login" element={user ? <h1>HOME</h1> : <Login />} />
        <Route path="/" element={user ? <h1>HOME</h1> : <Login />} />
        <Route path="/player/:username" element={<Player />} />
      </Routes>
    </div>
  )
}

export default App;

这个方案的核心是保证<Routes>和<Player />在虚拟DOM中的位置始终稳定，不会因为外层条件判断被判定为不同节点；同时初始化阶段不渲染路由，避免空状态下提前挂载组件触发无效请求。

不要尝试给<Route>或<Player />加固定key的方式绕开重挂载问题，这种方案治标不治本，后续路由结构调整时很容易复现问题，也不符合React的diff逻辑设计预期。

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