如何在SSR React中使用快递路由器?

时间:2018-07-01 07:35:12

标签: reactjs express serverside-rendering

有人可以帮我吗。我不想使用react-router。 我想用快速方式定义路由,我的 server.js 如下所示:

  router.get(
    '/',
    asyncHandler(async (req, res, next) => {
      const initialData = await fetchInitialData();
      const initialLanguage = req.i18n.language;
      const webInstance = req.webInstance;
      const { theme } = webInstance;
      const activeTheme = theme || 'default';
      const preloadState = { app: { activeTheme, webInstance, initialData } };
      const store = configureStore(preloadState);

      const markup = renderToString(
        <Provider store={store}>
          <I18nextProvider i18n={req.i18n}>
            <Home />
          </I18nextProvider>
        </Provider>
      );

      const finalState = store.getState();
      // i18n state
      const initialI18nStore = {};
      req.i18n.languages.forEach(l => {
        initialI18nStore[l] = req.i18n.services.resourceStore.data[l];
      });
      res.status(200).send(
        template({
          assets,
          markup,
          state: finalState,
          initialI18nStore,
          initialLanguage
        })
      );
    })
  );

如何修改 client.js ? 当前,客户端不知道我在哪个快速路由中以及使用哪个组件。

hydrate(
  <Provider store={store}>
    <I18nextProvider
      i18n={i18n}
      initialI18nStore={initialI18nStore}
      initialLanguage={initialLanguage}
    >
...Current page Component...
    </I18nextProvider>
  </Provider>,
  document.getElementById('root')
);

谢谢。

0 个答案:

没有答案