首页 文章

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

提问于
浏览 次
2

我试着真正理解路由如何在我的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 );
});

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

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

node.js express reactjs react-router

1 回答

  • 4

    ReactJS应用程序是单页面应用程序（SPA），通常它们是从express.js服务器的root（"/"）提供的 . 但是， unlike 任何静态网页，SPA不会为每次路由更改调用服务器，而是依赖于虚拟路由和它自己的客户端路由处理程序 . （如果你想知道，为什么SPA不刷新页面，这就是背后的原因，有些） . 如果SPA使用其客户端路由处理程序中定义的任何路由，则express将始终将其视为根路由"/"并且不执行任何操作，实际上它赢得了't know anything, as browser won' t任何请求 .

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

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

    （顺便说一句，这些虚拟路由也将由React在服务器端使用，当且仅当你使用React的服务器端渲染时 . 但是，express将不知道这些.Express总是表现相同，无论是您使用客户端呈现或服务器端呈现 . ）

    现在，最后，如果你想要调用你的快速路由"/test"，你将不得不对路由进行获取请求，因此将调用该路由 . （看看isomorphic-fetch，如果想知道使用哪个库）

    希望这些方便

    回复于

相关问题