React中useLocation state为空时导航失效及useState初始化问题求助

问题场景 #

React项目中，FoodDetails组件接收其他组件传递的数据正常，但需要实现：当useLocation返回的location.state为null时，自动导航到首页。

初始代码问题 #

最初代码能进入if (location.state === null)判断，但navigate("/")不生效；添加return后，return执行但导航仍没反应：

const FoodDetails = () => {
  const navigate = useNavigate();
  const location = useLocation();

  if (location.state === null) {
    navigate("/")
  }

  const food = location.state.food;

  return (
    <div className='FoodDetails'>
      <div className="FoodDetailsName">{food.name}</div>
    </div>
  )
}

export default FoodDetails

补充问题（useState初始化报错） #

加入useState钩子后，若放在判断前，会因location.state.food.weight为null触发TypeError；若先不初始化、在判断后设置又导致无限循环：

const FoodDetails = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const [weight, setWeight] = useState(location.state.food.weight || 100);
    
    
  if(location.state === null) {
    return <Navigate to="/" />;
  }

  return (
    <div className='FoodDetails'>
      <div className="FoodDetailsName">{food.name}</div>
    </div>
  )
}

export default FoodDetails

问题原因及解决方案 #

1. 导航被忽略的原因 #

• navigate是异步操作：直接调用navigate后，组件仍会继续执行后续代码（比如const food = location.state.food），此时location.state为null，会抛出错误中断组件渲染，导致导航还没完成就被报错终止。
• 使用<Navigate />但初始化useState时已报错：第二个代码里，useState在判断前执行，此时location.state为null，访问location.state.food直接报错，组件渲染中断，<Navigate />根本没机会执行。

2. 完整解决方案 #

核心思路：先完成location.state的校验，确保后续所有依赖state的代码都不会访问空值。

最终修正代码

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

const FoodDetails = () => {
  const navigate = useNavigate();
  const location = useLocation();

  // 第一步：先校验state是否存在，优先处理导航逻辑
  if (!location.state) {
    // 方式1：用navigate + return终止后续代码执行
    navigate("/");
    return null; // 返回null或加载组件，避免后续代码运行
    
    // 方式2：用Navigate组件，直接返回即可完成导航
    // return <Navigate to="/" replace />;
  }

  // 确认state存在后，再解构数据
  const { food } = location.state;
  // 安全初始化weight：用空值合并运算符，仅当weight为null/undefined时用默认值
  const [weight, setWeight] = useState(food.weight ?? 100);

  return (
    <div className='FoodDetails'>
      <div className="FoodDetailsName">{food.name}</div>
      {/* 其他依赖weight的业务代码 */}
    </div>
  )
}

export default FoodDetails

关键说明 #

• 代码顺序：所有依赖location.state的操作，必须放在state校验之后，从根源避免访问空值的报错。
• navigate的正确用法：调用navigate后一定要加return，终止组件后续渲染，否则报错会中断导航流程。
• useState安全初始化：用??（空值合并运算符）替代||，因为||会把0、空字符串等合法假值替换成默认值，而??仅在值为null或undefined时才用默认值，逻辑更严谨。

内容的提问来源于stack exchange，提问作者Cinc-B