0

Redux やストア コンテナーを使用せずに、自分のページのサーバー側レンダリングを実行し、ルーターに反応するだけでよいでしょうか。私の最初のページは、API からいくつかのデータをフェッチします。これをサーバー上の反応コンポーネントに渡すにはどうすればよいですか。サーバーでウィンドウ変数を使用すると、ウィンドウが未定義であるというエラーが表示されます。どんな助けでもいいでしょう。

使いたくない、還元。初期データ状態を取得しようとしましたが、これをサーバー側のコンポーネントに渡すにはどうすればよいですか。サーバーでウィンドウが定義されていないため、ウィンドウ変数を使用しても役に立ちません。

clientRouter.get('/', (req, res) => {
  match({routes : routes, location: req.url}, (err, redirect, props) => {
   if (err) {
      res.status(500).send(err.message)
    } else if (redirect) {
      res.redirect(redirect.pathname + redirect.search)
    } else if (props) {

        let todos = [{id: 1, title: "Hey loo"}, {id: 2, title: "Meoww"}];
        props.todos = todos
        **** how do i pass the todos state down to the components****
        const appHtml = renderToString(<RouterContext {...props}/>);
        res.send(renderPage(appHtml, todos))
      // if we got props then we matched a route and can render
    } else {
      // no errors, no redirect, we just didn't match anything
      res.status(404).send('Not Found')
    }
  })
})

上記は機能しませんでした

function renderPage(appHtml, state) {
  let initialState = JSON.stringify(state);
  return `

    <html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Judo Heroes - A Universal JavaScript demo application with React</title>
    <link rel="stylesheet" href="./../build/${cssSrc}">
  </head>
  <body>
    <div id="main">${appHtml}</div>
    <script>window.INIT_STATE = ${initialState}</script>
    <script src=./../build/${jsSrc}></script>
  </body>
</html>
   `
}
4

1 に答える 1