如何让 React.js 接受路由的 POST？

问题描述

构建我的第一个 React.js 应用程序，但我似乎无法让应用程序重定向。

我在 React 应用程序中使用 Twilio Voice TwiML (here)。我有前端和服务器。

我可以记录所说的内容然后转录。然后使用 action: 重定向到一个 URL。

下面是我的 call.js Twilio 函数（服务器）。 /Omg 重定向无效。

exports.handler = function(context,event,callback) {
  let twiml = new Twilio.twiml.VoiceResponse();
    
  const recipient = event.recipient;
    
  twiml.record({
    // transcribeCallback: '/transcription'
    action: '/Omg'
  });
  twiml.hangup();
    
    
  return callback(null,twiml);
}

下面是我的 App.js

import React,{Component} from 'react';
import { browserRouter as Router,Switch,Route } from 'react-router-dom';
import Omg from './Omg';
import './App.css';
      
const { Device } = require('twilio-client');
    
class App extends Component {
  constructor(props) {
    super(props)
    
    this.state={
      identity: '',status: '',ready: false
    }
    
    this.onChangeUpdateState = this.onChangeUpdateState.bind(this);
    this.setup = this.setup.bind(this);
    this.connect = this.connect.bind(this);
    this.disconnect = this.disconnect.bind(this);
  }
    
  componentDidMount() {
    const device = new Device();
    
    this.setState({
      device: device
    });
    
    device.on('incoming',connection => {
  // immediately accepts incoming connection
  connection.accept();
    
      this.setState({
        status: connection.status()
      });
    });
    
    device.on('ready',device => {
      this.setState({
        status: "device ready",ready: true
      });
    });
    
    device.on('connect',connection => {
      this.setState({
        status: connection.status()
      });
    });
    
    device.on('disconnect',connection => {
      this.setState({
        status: connection.status()
      });
    });
        
  }
    
  // This method sets the identity of the Twilio Device
  // that your device is going to connect to. This
  // example uses hardcoded values so that only devices
  // with the identities friend1 and friend2 can connect.
  // In a production application,this would have to be
  // handled in a much different way. Most likely,the
  // app would have users who are authenticated with a
  // username and password. Their unique username would
  // serve as their device’s identity and they would only
  // be able to connect to device’s owned by users in their
  // friend list.
    
  connect() {
    const recipient = this.state.identity === 'friend1' ? 'friend2' : 'friend1';
    this.state.device.connect({recipient: recipient});
  }
    
  disconnect() {
    this.state.device.disconnectAll();
  }
    
  setup(event) {
  // prevents form submission and page refresh
  event.preventDefault();
    
  fetch(`https://blah-service-2000014-dev.twil.io/token?identity=${this.state.identity}`)
    .then(response => response.json())
    .then(data => {
      this.state.device.setup(data.accesstoken);
      this.state.device.audio.incoming(false);
      this.state.device.audio.outgoing(false);
      this.state.device.audio.disconnect(false);
    })
    .catch(err => console.log(err))
  }
    
  onChangeUpdateState(event) {
    this.setState({
      identity: event.target.value
    });
  }
    
  render() {
    return (
      <Router>
        <div className="App">
          {
            this.state.ready
            ? <button className="noselect"
                      onMouseDown={this.connect}
                      onmouseup={this.disconnect}>
                Press 2 Talk
              </button>
            : <div>
                <p>Enter your name to begin.</p>
                <form onSubmit={this.setup}>
                  <input
                    value={this.state.identity}
                    onChange={this.onChangeUpdateState}
                    type="text"
                    placeholder="What's your name?"></input>
                  <input type="submit" value="Begin Session"></input>
                </form>
              </div>
          }
          <p>{ this.state.status }</p>
        </div>
        <Switch>
              <Route path='/Omg' component={Omg} />
          </Switch>
      </Router>
    );
  }
       
}
    
export default App;

此时，我不确定是 React 新手错误还是我在使用 Twilio 时做错了什么？

解决方法

React 是一个客户端应用程序，而不是一个 HTTP 服务器。它不能接受 POST 请求，因为首先不会向发出请求。

您需要编写实际的服务器端代码来处理这个 POST 请求，然后重定向到一个 URL，该 URL 将您的 React 应用程序提供给浏览器。