React Router 导致 Reflux 存储中的 AJAX 调用失败

Question

我在 Reflux 商店有以下 AJAX 电话：

$.ajax({
  url: 'submit.php',
  context: this,
  method: 'POST',
  dataType: 'json',
  success: function(data){...},
  error: function(jqXHR, textStatus, error){...}
});

这是我的路线：

let browserHistory = createBrowserHistory();
ReactDOM.render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={About} />

      <Route path="about" component={About} />
      <Route path="leaderboards" component={LeaderboardPage} />
      <Route path="profile" component={Profile} />
      <Route path="validate/:projectName" component={Validate} />
    </Route>
  </Router>
), document.getElementById('app'));

每当 Validate 组件要求它的商店发出 AJAX 请求时，该请求将发送给 validate/submit.php 而不是 submit.php。怎么回事？

Answer 1

由于您只向 $.ajax 提供文件名而不是绝对路径或 URL，因此浏览器将其用作相对路径 URL。由于当前页面的URL路径是/validate/foo（不用管它是由history.pushState设置的，浏览器不区分），它假设你想请求submit.php相对到那条路径，即 /validate/submit.php.

在浏览器中发出请求时，您应该始终使用绝对路径或完整路径 URL，例如：

$.ajax({
  url: '/submit.php',
  // ...
});

React Router 导致 Reflux 存储中的 AJAX 调用失败

React Router causing AJAX call in Reflux store to fail

javascript

jquery

url-routing

reactjs

react-router