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

我试图真正理解路由如何与我的反应应用程序上的react-router一起工作，并在我的node.js服务器上表达。服务器端和客户端的路由 - React.js＆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没有被调用。

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

来源

2016-05-26 onedkr

哪里是通话“/测试”？ – sundar

在我的节点路由'app.get（'/ test'）' – onedkr

你必须从你的客户端应用程序调用该API。另一个不会被称为 – sundar

ReactJS应用程序是express.js服务器的单页应用（SPA ）和，他们一般是从根担任（ “/”）。但是，与不同，任何静态网页，SPA都不会为每个路由更改调用服务器，而取决于虚拟路由以及它自己的客户端路由处理程序。（如果你想知道，为什么SPA不刷新页面，这是背后的原因，有点）。如果SPA使用其客户端路由处理程序中定义的任何路由，则表示将始终将其视为根路由“/”而什么都不做，实际上它什么也不知道，因为浏览器不会做任何事情任何请求。

阵营-路由器提供这些虚拟路由到ReactJS应用程序。

在你的代码，当你作出反应的应用程序从“/”到“/指数”云或定义的任何其它途径使用阵营，路由器，它不要求表达服务器的任何信息，而一切都通过客户端/浏览器完成。这就是为什么，即使你的路由被定义为“/ test”对于ReactJS，它不会为服务器端调用任何东西。

（顺便说一句，这些虚拟路线也将使用阵营在服务器端，当且仅当你使用阵营的服务器端渲染。但是，快递不会知道这些。快递将始终具有相同的行为，无论您使用客户端呈现或服务器端渲染。）

现在，最后，如果你希望你的表达路线“/ test”被调用，您将不得不向提取对该路由的请求，因此路由将被调用。（看看isomorphic-fetch，如果想使用哪个库）

希望这些来方便

来源

2016-05-26 14:33:36

非常感谢您的答案！现在一切都很清楚。事实上，我必须在我的AJAX调用中调用一个url来填充我的组件，我想象这个解决方案（我的服务器中的路由“/ test”）。我会测试同构取指。然而，这是在反应思维中做好事的好方法吗？ – onedkr

您能否详细说明您的问题，我的意思是，您要求成为一种好方法的方式是什么？ –

事实上，我正在寻找一种好方法来填充我的反应组件，并将数据存储在我的Mysql数据库中。我虽然那个AJAX电话是一个好方法。所以在我的客户端，我从我的服务器调用了一个URL，我返回一个JSON。然而，我急于开始关注流量架构。我有点失落，所以我问你是否认为在componentWillMount中调用AJAX调用是一种在通用架构中获取数据的反应思维方式？通过同构获取从我的服务器调用URL看起来很奇怪。我觉得这不是自然的...... – onedkr

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

回答

相关问题