如何在C# Web API中接收React的location.state参数？

首先明确：React Router的Link组件里的state参数是前端路由内部状态，不会自动随HTTP请求发送到后端API，必须调整前端传参方式，后端对应修改接收逻辑。

方案一：通过URL查询参数传递 #

前端修改Link组件 #

把state转为URL查询参数，直接拼在路径后：

<Link to={{
  pathname: `/Student/${row.id}`,
  search: `?state=${true}`
}}>{row.studentName}</Link>

或者用useSearchParams构造更规范的查询参数（推荐）：

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

// 组件内构造查询参数
const [searchParams] = useSearchParams();
searchParams.set('state', 'true');
const queryStr = searchParams.toString();

// Link使用构造好的查询字符串
<Link to={`/Student/${row.id}?${queryStr}`}>{row.studentName}</Link>

后端API修改接收逻辑 #

在方法参数里添加[FromQuery]标记的state参数：

[HttpGet("Student/{id}")]
public async Task<StudentDetail> GetStudentDetail(int id, [FromQuery] bool state)
{
    // 直接使用state参数处理业务逻辑
    // ...
}

方案二：通过路由路径参数传递 #

如果state语义上适合作为路由的一部分，可以直接嵌入路径：

前端修改Link与路由配置 #

// Link组件
<Link to={`/Student/${row.id}/${true}`}>{row.studentName}</Link>

// 路由配置（假设用react-router-dom v6+）
<Route path="/Student/:id/:state" element={<StudentDetailPage />} />

后端API修改路由与参数 #

调整路由模板，直接接收路径中的state：

[HttpGet("Student/{id}/{state}")]
public async Task<StudentDetail> GetStudentDetail(int id, bool state)
{
    // 使用state参数
    // ...
}

方案三：先获取前端state再发起API请求 #

如果一定要保留Link的state传递，可以在跳转后的前端组件中先拿到state，再通过HTTP请求（如axios/fetch）传给后端：

前端组件处理 #

import { useLocation, useParams } from 'react-router-dom';
import axios from 'axios';

const StudentDetailPage = () => {
  const location = useLocation();
  const { id } = useParams();
  const state = location.state; // 拿到Link传递的state

  useEffect(() => {
    // 发起API请求时携带state参数
    axios.get(`/api/Student/${id}`, {
      params: { state }
    }).then(response => {
      // 处理后端返回数据
    });
  }, [id, state]);

  // 组件渲染逻辑
  return <div>学生详情</div>;
};

这种情况下后端依然用方案一的API代码接收查询参数即可。

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