服務器端和客戶端端的路由-React.js和Node.js

Question

我試圖真正理解路由如何在我的React應用程序上與react-router一起工作，並在我的node.js服務器上表達。

React-router代碼：

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呼叫？

Answer 1

ReactJS應用程序是單頁應用程序（ SPA ），通常從express.js服務器的根目錄（“ /”）提供服務。 但是， 與任何靜態網頁不同 ， SPA不會為每次路由更改都調用服務器，而是依賴於虛擬路由，並且它是自己的客戶端路由處理程序。 （ 如果您想知道，為什么SPA不會刷新頁面，這就是背后的原因 ）。 如果SPA使用在其客戶端路由處理程序中定義的任何路由，則express始終會將其視為根路由“ /”，並且不執行任何操作，實際上它一無所知，因為瀏覽器不會發出任何請求。

React-Router將這些虛擬路由提供給ReactJS應用。

在您的代碼中，當您的React應用程序從“ /”到“ / index”或使用React-Router定義的任何其他路由時，它不會請求快速服務器提供任何服務，而是一切都在客戶端/瀏覽器上完成。 這就是為什么即使您將ReactJS的路由定義為“ / test” ，它也不會在服務器端調用任何東西的原因。

（ 順便說一下 ，這些虛擬的路線也將作出反應在服務器端，當且僅當你使用作出反應的服務器端渲染，但是， 表達不知道這些用快遞將始終具有相同的行為，無論您使用客戶端渲染還是服務器端渲染。）

現在，最后，如果您要調用快速路由“ / test” ，則必須向該路由發出獲取請求，因此將調用該路由。 （如果想知道使用哪個庫， 請看一下isomorphic-fetch ）

希望這些能派上用場