将variables从react-router传递给子组件
如何从服务器端的react-router传递variables到子组件。 我想通过一些variables传递给由我的组件通过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') } }) }) 尝试添加自定义道具来呈现道具也有同样的问题。
我发现这个链接真的很有用：
https://github.com/reactjs/react-router/issues/2073
注意：请参阅上次评论
如果我理解你的评论意思是什么 – 你需要一种将服务器数据传递给客户端组件的方法。
我倾向于使用EJS（或者你正在使用的任何模板语言）来将其呈现出来，以将JSONstring分配到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