Node与Express开发（第2版）

单页应用

｜

179

致性、保证性能以及保证组件间的通信。

你大概也会好奇环绕着度假产品的看起来像空组件的东西（

<>...</>

）。它被称为

fragment

。这个

fragment

是必要的

，因为每个组件都必须渲染成单个元素。在这种情形中

有两个元素，即

<h2>

和

<div>

。这个

fragment

只是提供一个能容纳这两个元素的“透明”

的根元素，这样我们才能将其渲染成单个元素。

把

Vacations

组件加入应用，即便它还没有度假产品可以显示。在

client/src/App.js

中，首

先导入度假产品页：

import Vacations from './Vacations'

然后在

<Switch>

路由组件中为它创建一个路由：

<Switch>

<Route path="/" exact component={Home} />

<Route path="/about" exact component={About} />

<Route path="/vacations" exact component={Vacations} />

<Route component={NotFound} />

</Switch>

保存文件，应用应该会自动重新加载，然后就可以导航到

/vacations

页了，尽管现在还没

有什么东西可看。现在，我们的客户端已经有了大部分的基础设施，接下来看看如何跟

Express

集成起来。

16.4.4

　度假产品页

——

跟服务器端集成

我们已经完成了建立度假产品列表页的大部分工作，也有了一个从数据库获取度假产品并 ...