React Router 4.2.0配置接收POST请求及相关问题求助

首先得明确一个关键：React Router 是客户端路由系统，它只负责处理浏览器端的导航行为（比如地址栏变化、<Link>跳转），本身并不处理HTTP请求方法（GET/POST）。所以你想要让应用接收供应商的POST请求，得靠后端服务器（比如你提到的Express）来处理，再和前端路由配合起来。

你之前尝试的express-react-router以及找不到的express-location包，大概率是因为这些包已经不再维护或者被废弃了，换个更稳定的方案就好，具体步骤如下：

1. 用Express后端接收POST请求 #

首先在你的Express服务器中新增一个POST路由，专门处理供应商发送的请求。比如：

const express = require('express');
const app = express();
const path = require('path');

// 解析POST请求的请求体（根据供应商发送的数据格式选择，比如json或urlencoded）
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// 处理供应商的POST请求
app.post('/vendor-webhook', (req, res) => {
  // 这里处理POST数据：比如验证签名、存储数据等
  const vendorData = req.body;
  console.log('收到供应商POST数据:', vendorData);

  // 处理完成后，可以选择两种方式：
  // 方式1：重定向到React应用的某个路由，带上处理结果（比如用查询参数）
  res.redirect(`/vendor-result?status=success&data=${encodeURIComponent(JSON.stringify(vendorData))}`);
  
  // 方式2：直接返回React应用，让前端通过状态管理（比如Redux/Context）处理结果
  // res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

// 托管React静态文件（假设你的React构建产物在build目录）
app.use(express.static(path.join(__dirname, 'build')));

// 所有客户端路由都返回React的index.html，让React Router处理
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(3000, () => {
  console.log('服务器运行在http://localhost:3000');
});

2. 在React中处理路由和结果 #

如果用上面的方式1（重定向），你可以在React中创建对应的路由组件来读取查询参数：

import React from 'react';
import { Route } from 'react-router-dom';

const VendorResult = (props) => {
  // 从URL查询参数中获取后端传递的数据
  const queryParams = new URLSearchParams(props.location.search);
  const status = queryParams.get('status');
  const data = queryParams.get('data') ? JSON.parse(decodeURIComponent(queryParams.get('data'))) : null;

  return (
    <div>
      <h2>供应商请求处理结果</h2>
      <p>状态: {status}</p>
      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  );
};

// 在你的路由配置中添加这条路由
<Route path="/vendor-result" component={VendorResult} />

3. 为什么不用express-react-router？ #

那个包看起来已经很久没有更新了，依赖的express-location可能已经被移除或者改名，所以依赖它很容易出问题。上面的方案是更通用、更稳定的Express+React Router配合方式，几乎不会有依赖问题。

额外提示 #

如果供应商的POST请求是Webhook类的（不需要前端页面响应，只需要后端处理），那你可以在Express的POST路由中直接处理数据，不需要重定向，处理完成后返回200 OK即可，不需要和前端路由交互。

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