服务器容器

ServerContainer 组件提供实用程序，以便使用正确的 导航状态 在服务器上渲染您的应用程序。

示例

// Ref which will be populated with the screen options
const ref = React.createRef();

// Location object containing the `pathname` and `search` fields of the current URL
const location = { pathname: '/profile', search: '?user=jane' };

// Get rendered HTML
const html = ReactDOMServer.renderToString(
  <ServerContainer ref={ref} location={location}>
    <App />
  </ServerContainer>
);

// Then you can access the options for the current screen in the ref
const options = ref.current.getCurrentOptions(); // { title: 'My Profile' }

ServerContainer 组件应该在服务器渲染期间包裹您的整个应用程序。请注意，您仍然需要在您的应用程序中使用 NavigationContainer，ServerContainer 不会替换它。

有关详细指南和示例，请参阅 服务器渲染指南。

引用

如果您将 ref 附加到容器，则可以在渲染应用程序后获取当前屏幕的选项。ref 将包含一个名为 getCurrentOptions 的方法，该方法将返回一个包含导航树中焦点屏幕选项的对象。

const options = ref.current.getCurrentOptions();

然后，您可以从该对象访问屏幕选项，并将其放入 HTML 中。

<title>{options.title}</title>
<meta name="description" content={options.description} />

请注意，如果您在初始渲染时没有渲染导航器，则 options 对象可能未定义。

属性

location

包含用于服务器渲染输出的定位信息的 Location 对象。您可以传递与浏览器中 location 对象匹配的 pathname 和 search 属性。

<ServerContainer location={{ pathname: '/profile', search: '' }}>
  <App />
</ServerContainer>

通常，您应该根据传入的请求构建此对象。

Koa 的基本示例（不要在生产环境中使用）

app.use(async (ctx) => {
  const html = ReactDOMServer.renderToString(
    <ServerContainer location={{ pathname: ctx.path, search: ctx.search }}>
      <App />
    </ServerContainer>
  );

  ctx.body = html;
});