你需要把navigate("/")放在useEffect里面，类似于：

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

  const locationState = location.state;

  useEffect(() => {
    if(locationState === null){
      navigate("/");
    }
  }, [locationState]);

  const food = location.state.food;

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

export default FoodDetails;

useEffect的回调函数将在每次其依赖项数组中的某个内容发生更改时运行。在本例中为locationState。请注意，在useEffect之前解构依赖项是一个好主意。

navigate函数发出一个命令式导航操作，当前的实现是作为一个 * 无意的 * 副作用调用的。虽然您 * 可以 * 使用useEffect钩子来调用navigate作为一个 * 有意的 * 副作用，但组件仍然会先呈现 * 然后 * 调用useEffect钩子回调。您将立即看到返回的JSX。
我建议有条件地呈现Navigate组件，它将在初始呈现周期中发出一个声明性导航操作，其他食物细节JSX将没有机会呈现。
在任何一种情况下，FoodDetails组件和路由/页面都将被加载/呈现。这只是一种减轻呈现不希望用户看到的瞬时UI的方法。
示例：

import { Navigate } from 'react-router-dom';

const FoodDetails = () => {
  const { state } = useLocation();
  const { food } = state || {};

  if (!food) {
    return <Navigate to="/" />;
  }

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

export default FoodDetails;