如何处理同构React + React路由器应用中的后置请求

Question

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

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

1. 服务器使用react-router来处理所有请求
2. react-router将调用驻留在与路由匹配的每个React View中的fetchData函数。
3. 将之前获取的数据设置为React View的props并将其呈现为string
4. 将之前获取的string和数据作为全局变量window.__STATE__注入HTML并将HTML传递给客户端
5. 我们已成功从服务器呈现React App
6. 当客户端完成加载我们的React App javascript后，它将尝试渲染。 但是我们从window.__STATE__传递状态作为我们的React App的道具，并且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);
    }
  }
}

Answer 1

在客户端上获取“POST”数据

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

使用POST数据

所以现在你有了POST数据，但是仍然存在无法将POST数据提供给React Router 0.13.x及更早版本的转换挂钩的问题。 我为此功能创建了一个pull请求，该请求现已关闭，因为它是作为即将发布的v1.0版本重写的一部分而包含的。

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

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

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

我现在还没有详细介绍，因为v1.0仍处于测试阶段，v0.13.x无论如何都没有必要的API，但是我有一个使用上面的pull请求实现的存储库0.13.x的这个工作流程，您可以在此期间查看：

• 同构实验室 - 自述文件概述了事物如何组合在一起。

以下是该过程的一些粗略流程图：

服务器POST有错误并重新显示

客户端POST有错误并重新显示

---

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

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