服务器端和客户端的路由 - 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服务器的根目录（“/”）提供的。但是，与任何静态网页不同，SPA不会为每次路由更改都调用服务器，而是依赖于虚拟路由和它自己的客户端路由处理程序。（如果你想知道为什么 SPA 不刷新页面，这就是背后的原因，有点）。如果 SPA 使用在其客户端路由处理程序中定义的任何路由，则express将始终将其视为根路由“/”并且什么也不做，实际上它什么都不知道，因为浏览器不会发出任何请求。

反应-路由器提供了这些虚拟路由到ReactJS应用。

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

（顺便说一下，这些虚拟路径也将被用于由阵营在服务器端，如果只有你正在使用，如果作出反应的服务器端渲染，但是，表达不会知道这些。快递总会表现得一样，无论您使用客户端渲染还是服务器端渲染。）

现在，最后，如果您希望调用快速路由“/test”，则必须向该路由发出一个获取请求，因此该路由将被调用。（如果想知道要使用哪个库，请查看isomorphic-fetch）

希望这些能派上用场