如何在同构 React + React 路由器应用程序中处理发布请求

Posted 2023-02-22

【中文标题】如何在同构 React + React 路由器应用程序中处理发布请求

【英文标题】：How to Handle Post Request in Isomorphic React + React Router Application

【发布时间】：2015-09-13 18:15:14

【问题描述】：

我想构建 Isomorphic react + react-router 应用程序，经过几天的谷歌搜索，现在我可以实现只处理 GET 请求的同构应用程序。

这是我到目前为止所做的：

服务器使用react-router处理所有请求 react-router 将调用驻留在每个与路由匹配的 React View 中的 fetchData 函数。 将之前获取的数据设置到 React View 的 props 中，渲染成string 将string 和之前获取的数据作为全局变量window.__STATE__ 注入html 并将HTML 传递给客户端 我们已成功从服务器渲染 React 应用程序 当客户端完成加载我们的 React App javascript 时，它会尝试渲染。但是我们将window.__STATE__的状态作为我们React App的props传递，React不会重新渲染，因为状态是一样的

问题是它不适用于 POST/PUT/DELETE/WHATEVER 请求。在处理 GET 请求时，react-router 有关于 params 和 query 的信息。例如，如果我们有一个路由：/user/:uid，并且客户端请求这个 url：/user/1?foo=bar，那么 params 将是：uid: 1 和 query 将是 foo: 'bar'

react-router 然后可以将其传递给fetchData 函数，这样它就会知道以uid 为1 获取用户并使用foo 查询执行任何操作。

在 POST 请求中，react-router 不知道 POST 参数。在服务器上，当然我们可以将 POST 参数传递给fetchData 函数，但是客户端呢？它不知道 POST 参数是什么。

有没有办法让服务器告诉客户端有关 POST 参数的信息？下面是我的登录视图的示例。我希望当用户提交表单时，服务器会在错误时呈现错误消息，或者在成功时将其重定向到仪表板。

fetchData.js

import whenKeys from 'when/keys';

export default (authToken, routerState) => 
  var promises = routerState.routes.filter((match) => 
    return match.handler.fetchData;
  ).reduce((promises, match) => 
    promises[match.name] = match.handler.fetchData(authToken, routerState.params, routerState.query);
    return promises;
  , );

  return whenKeys.all(promises);

server.js

...
app.use((req, res) => 
  const router = Router.create(
    routes,
    location: req.originalUrl,
    onError: next,
    onAbort: (abortReason) => 
      next(abortReason);
    
  );

  router.run((Handler, state) => 
    fetchData(authToken, state).then((data) => 
      // render matched react View and generate the HTML
      // ...
    )
  );
);
...

login.jsx

import React from 'react';
import DocumentTitle from 'react-document-title';
import api from './api';

export default class Login extends React.Component 

  constructor(props) 
    super(props);

    // how to fill this state with POST parameters on error?
    // how to redirect on success?
    // and remember that this file will be called both from server and client
    this.state = 
      error: '',
      username: '',
      password: ''
    ;
  

  // I saw some people use this function, but it'll only work if
  // the form's method is GET
  static willTransitionTo(transition, params, query) 
     // if only we could read POST parameters here
     // we could do something like this
     transition.wait(
       api.post('/doLogin', postParams).then((data) => 
         transition.redirect(`/dashboard`);
       );
     );
  

  render() 
    return (
      <DocumentTitle title="Login">
        <div className="alert alert-danger">this.state.error</div>
        <form method="post">
          <input type="text" name="username" value=this.state.username  onChange=this._onFieldChange('username') placeholder="Username" /><br />
          <input type="password" name="password" value=this.state.password  onChange=this._onFieldChange('password') placeholder="Password" /><br />
          <button type="submit">Login</button>
        </form>
      </DocumentTitle>
    );
  

  _onFieldChange(name) 
    var self = this;
    return (e) => 
      e.preventDefault();
      var nextState = ;
      nextState[name] = e.target.value;
      self.setState(nextState);
    
  

【参考方案1】：

在客户端获取“POST”数据

在客户端，您通过从表单输入中提取值来获取 POST 数据，这种方式与您在服务器上正常提交表单时收到的值相对应。

使用 POST 数据

所以现在您有了 POST 数据，但仍然存在无法将 POST 数据输入 React Router 0.13.x 及更早版本中的转换挂钩的问题。我创建了一个 pull request for this feature，它现在已经关闭，因为它被包含在即将发布的 v1.0 版本的重写中。

它的要点是位置现在有一个状态对象，用于存储您需要的关于正在处理的当前请求/转换（两者是类似的）的任何额外数据：

在服务器上，您一次处理一个请求，因此您使用来自req.body 的数据创建一个静态位置 在客户端上，您将状态对象（包含提取的表单数据）传递给transitionTo()。

现在您的转换挂钩能够在两种环境中接收相同的表单数据。如果一切顺利，那就太好了！如果事情不顺利，您需要一种方法来传递错误并再次重新呈现表单。新的状态对象再次救援！使用transition.redirect() 并传递输入数据和错误，您现在拥有了在两边渲染所需的一切。

我现在不打算详细说明，因为 v1.0 仍处于测试阶段，而 v0.13.x 没有必要的 API 来执行此操作，但我有一个使用拉取请求的存储库上面用 0.13.x 来实现这个工作流，你可以同时看看：

isomorphic-lab - 自述文件概述了事物如何组合在一起。

这里还有一些粗略的流程图：

服务器 POST 出错并重新显示

客户端 POST 出错并重新显示

---

我还创建了一些与此场景相关的可重用模块：

get-form-data 从表单输入中获取数据，其格式应为 POST 格式。 react-auto-form 提供 <AutoForm>，您可以使用它来代替 <form> 来接收来自表单输入的所有数据作为其 onSubmit 处理程序的参数 react-router-form，即 <form>，React Router 的 <Link> 是 <a> - 它处理触发到给定 action 的转换，传递 method 和 body（表单数据）状态 - 这将很快就会更新到 v1.0。

【讨论】：

伟大的@insin，这正是我所需要的。我希望 React Router v1.0 能尽快推出。

你有@jonny-buchanan 的例子吗？

很高兴看到有人真正编写同构应用程序，而不仅仅是关于它们的入门级文章。 <AutoForm> 和 CONSTRUCT 真是好主意。