React组件渲染调用navigate报错且useEffect不触发如何解决？

报错原因 #

直接在组件渲染同步逻辑中调用navigate()属于渲染阶段触发副作用，违反React的生命周期规则，因此会触发报错。

方案1：useEffect正确写法 #

你之前把state加入依赖数组的写法逻辑是对的，未触发的常见原因是未将navigate加入依赖数组，或未正确从react导入useEffect，修正后的完整代码如下：

import { useEffect } from 'react'
import { useNavigate, useLocation } from 'react-router-dom'

export default function Addblousesalwar() {
  const navigate = useNavigate()
  const { state } = useLocation()

  useEffect(() => {
    if (state === null || state === undefined) {
      // 加replace配置，避免用户点击后退按钮回到当前页
      navigate('/login', { replace: true })
    }
  }, [state, navigate]) // 必须同时加入依赖

  // 组件原有业务逻辑
  return <div>页面内容</div>
}

如果仍未触发，可排查react-router-dom版本是否为v6及以上，低版本API行为存在差异。

方案2：官方推荐声明式重定向（更简洁，无需useEffect） #

直接通过React Router提供的Navigate组件实现渲染期重定向，属于合法的渲染逻辑，不会触发报错，性能更优：

import { Navigate, useLocation } from 'react-router-dom'

export default function Addblousesalwar() {
  const { state } = useLocation()

  // 校验不通过直接返回重定向组件
  if (state === null || state === undefined) {
    return <Navigate to="/login" replace />
  }

  // 组件原有业务逻辑
  return <div>页面内容</div>
}

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