Question

我尝试真正理解路由如何在我的react应用程序上使用react-router并在我的node.js服务器上表达。

React-router code：

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 );
});

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

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

Answer 1

ReactJS 应用程序是单页面应用程序（ SPA ），通常它们是从 express.js的root（“/”）提供的服务器。但是，与任何静态网页不同， SPA 不会为每次路由更改调用服务器，而是依赖于虚拟路由以及它自己的客户端 - 边路线处理人员。（如果你想知道，为什么SPA不刷新页面，这就是背后的原因，有些）。如果SPA使用其客户端路由处理程序中定义的任何路由， express 将始终将其视为根路由“/”并且什么也不做，实际上它赢了“知道任何事情，因为浏览器不会提出任何要求。

React-Router 将这些虚拟路由提供给 ReactJS 应用。

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

（顺便，这些虚拟路由也将由 React 在服务器端使用，当且仅当你是使用 React 的服务器端呈现。但是， express 将无法了解这些。 Express 将始终表现相同，无论您使用的是客户端 - 渲染或服务器端渲染。）

现在，最后，如果您希望调用 express 路由“/ test”，则必须进行 fetch 对路线的要求，因此将调用路线。（查看isomorphic-fetch ，如果想知道要使用哪个库）

希望这些方便

服务器上的路由＆amp;客户端 - React.js＆amp; Node.js的

1 个答案: