服务器和客户端的路由 - React.js 和 Node.js

Question

我试图真正了解路由如何在我的 react 应用程序上与 react-router 一起工作，并在我的 node.js 服务器上表达。

反应路由器代码：

import ..
import { Router, Route, IndexRoute, hashHistory, IndexRedirect, Redirect } from "react-router";

render(
  <Router history={hashHistory}>
    <Redirect from="/" to="/index"/>
    <Route path="/" component={App}>
        <IndexRoute component={NavBarTop} />
        <IndexRoute component={NavFilter} />
        <Route path="/index" component={Tickets} />
        <Route path="/ticket/:id" component={TicketInformations} />
        <IndexRoute component={InterventionsList} />
    </Route>
  </Router>,
document.getElementById('container'));

我的服务器路由：

app.use('/', express.static(path.join(__dirname, '../client/')), function(res, eq) {
});

app.get('/test', function (req, res) {
  console.log("test");
  var data = getTickets(); // return a JSON
  res.end( data );
});

我的反应路由工作完美，但是我想进行 AJAX 调用来填充我的组件。为此，我尝试从我的节点服务器获取 JSON。但是路径“测试”不起作用。我的 console.log 没有被调用。

我不知道为什么，我可能不明白它是如何工作的。 如何轻松创建网络服务来准备我的 AJAX 调用？

Answer 1

ReactJS 应用程序是单页应用程序 (SPA)，通常它们从 express.js 的根目录 ("/") 提供服务em> 服务器。但是，与任何静态网页不同，SPA 不会在每次路由更改时调用服务器，而是依赖于 虚拟路由 和它自己的客户端 -支线处理程序。 （如果您想知道，为什么 SPA 不刷新页面，这就是背后的原因，有点）。如果 SPA 使用其客户端路由处理程序中定义的任何路由，express 将始终将其视为根路由 "/" 并且什么也不做，实际上它不会什么都不知道，因为浏览器不会发出任何请求。

React-Router 提供这些 虚拟路由 到 ReactJS 应用程序。

在您的代码中，当您的 React 应用从 "/" 转到 "/index" 或使用 React-Router定义的任何其他路由时>，它不会向 express 服务器请求任何东西，而是通过客户端/浏览器完成所有操作。这就是为什么，即使你有一个为 ReactJS 定义为 "/test" 的路由，它也不会调用服务器端的任何东西。

（顺便说一下，这些虚拟路由也将被React在服务器端使用，当且仅当你使用 React 的服务器端渲染。但是，express 不会知道这些。无论您使用客户端，Express 的行为总是相同的端渲染或服务器端渲染。）

现在，最后，如果您希望调用 express 路由 "/test"，则必须进行 fetch向路由请求，因此路由将被调用。 （看看isomorphic-fetch，如果想知道使用哪个库）

希望这些能派上用场