将变量从反应路由器传递给子组件答案

【问题标题】：Passing variable from react-router to child components将变量从反应路由器传递给子组件
【发布时间】：2016-05-26 23:33:42
【问题描述】：

如何将变量从服务器端的 react-router 传递给子组件。我想将一些变量传递给由 RoutingContext 呈现的组件

import { renderToString } from 'react-dom/server'
import { match, RouterContext } from 'react-router'
import routes from './routes'

serve((req, res) => {
  match({ routes, location: req.url }, (error, redirectLocation,     renderProps) => {
    if (error) {
  res.status(500).send(error.message)
    } else if (redirectLocation) {
  res.redirect(302, redirectLocation.pathname + redirectLocation.search)
    } else if (renderProps) {
  res.status(200).send(renderToString(<RouterContext {...renderProps} />))
    } else {
  res.status(404).send('Not found')
    }
  })
})

【问题讨论】：

标签： javascript node.js reactjs react-router

【解决方案1】：

在尝试将自定义道具添加到渲染道具时遇到了同样的问题。

我发现这个链接非常有用：

https://github.com/reactjs/react-router/issues/2073

注意：见最后评论

如果我理解您在评论中的意思——您需要一种将服务器数据传递到客户端组件的方法。

我倾向于使用 EJS（或您在 express 中使用的任何模板语言）将 JSON 字符串分配给 HTML 中的脚本标记并将其分配给窗口范围。

所以你的 index.ejs 文件看起来会包含类似

<body>
    <main>
        <%- markup %>
    </main>

    <script>
        window.data = JSON.parse('<%- data %>');
    </script>
</body>

然后在你的服务器js中

var customProps = {}; // the data you are passing in
var markup = renderToString(...); // your renderToString stuff you did before

var data = {
    markup: markup,
    data: JSON.stringify(customProps)
};

res.status(200).render(index.ejs', data);

然后在你的顶级路由中你可以引用window.data*

注意：您需要添加一些条件才能知道您使用的是浏览器还是服务器，我使用https://www.npmjs.com/package/is-browser

【讨论】：

非常感谢！它可以工作，但我有一个新问题......我正在从服务器渲染这些数据。但是客户端路由器没有看到我在带有组件的服务器中渲染的数据.. ..
请帮助我卡住了
这有帮助吗？ ↑
对不起，我会在晚上检查它。但是将数据传递给窗口对象是正常的方式吗？ is-browser 用于 browserify。但我正在使用 webpack.hm 我认为 webpack 具有相同的模块。但是你能解释为什么我必须使用这个吗？我会在服务器上使用它吗？还是客户端？
如果您使用“同构”反应，您的应用程序需要同时在服务器和客户端上运行。因此，您需要一种将初始道具传递给客户端渲染代码的方法。我确信有其他方法可以做到这一点，但我发现最简单的方法是通过窗口对象。 isbrowser 模块是一个简单的模块，在需要时会告诉您它是否正在服务器上运行 ||客户端，通过它的 package.json。我敢肯定，如果它在 browserify 中不起作用，将会有替代方案。可以像这样使用：var props = require('is-browser') ? window.props : this.props;