React基于API请求的条件路由实现问题求助

可以从前端React路由拦截和后端Flask会话校验两部分配合实现需求，具体步骤如下：

一、后端Flask逻辑处理 #

用Session存储用户提交的表单数据，确保只有提交过表单的用户才能获取到有效数据：

1. 配置Session密钥（生产环境需使用安全的随机密钥）
2. 处理表单POST请求时，将生成的预测结果存入Session
3. 处理Predict页面的GET请求时，从Session读取数据，无数据则返回空对象或404状态码

示例代码：

from flask import Flask, request, jsonify, session

app = Flask(__name__)
app.secret_key = "your-secure-secret-key"  # 替换为实际安全密钥

# 表单提交接口
@app.route("/api/submit", methods=["POST"])
def submit_form():
    form_data = request.get_json()
    # 这里编写你的预测逻辑，生成结果
    prediction_result = {"prediction": "sample-result", "details": "预测详情内容"}
    # 将结果存入session
    session["prediction"] = prediction_result
    return jsonify({"status": "success"})

# 获取预测结果接口
@app.route("/api/predict", methods=["GET"])
def get_prediction():
    # 从session取数据，无数据则返回空对象
    prediction = session.get("prediction", {})
    # 也可以返回404状态码增强校验：
    # if not prediction:
    #     return jsonify({}), 404
    return jsonify(prediction)

二、前端React路由校验 #

在Predict组件挂载时发起GET请求，校验返回数据，无数据则跳转至/apology路由：

1. 使用useNavigate钩子实现路由跳转
2. 在useEffect中发起GET请求，判断返回数据是否为空
3. 处理请求失败的情况（如网络错误），同样跳转至错误页面

示例代码：

import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";

function Predict() {
  const navigate = useNavigate();
  const [predictionData, setPredictionData] = useState(null);

  useEffect(() => {
    const fetchPrediction = async () => {
      try {
        const res = await fetch("/api/predict");
        // 若后端返回404，直接跳转错误页
        if (!res.ok) {
          navigate("/apology");
          return;
        }
        const data = await res.json();
        // 判断返回数据是否为空对象
        if (Object.keys(data).length === 0) {
          navigate("/apology");
          return;
        }
        setPredictionData(data);
      } catch (err) {
        // 请求出错时跳转至错误页
        navigate("/apology");
      }
    };

    fetchPrediction();
  }, [navigate]);

  // 加载状态展示
  if (!predictionData) {
    return <div>加载中...</div>;
  }

  return (
    <div className="predict-container">
      <h2>预测结果</h2>
      <p>预测值：{predictionData.prediction}</p>
      <p>详情：{predictionData.details}</p>
    </div>
  );
}

export default Predict;

三、额外优化 #

• 若需要长期保留用户数据，可考虑将数据存入数据库，通过用户ID关联查询
• 前端可在提交表单成功后临时存储标记（如localStorage.setItem('hasSubmitted', 'true')），但优先推荐后端Session校验，安全性更高

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