如何使用异步数据在服务器端渲染组件

Question

我搜索了很多，但没有找到任何在没有任何通量（redux）实现的情况下渲染标记之前在反应服务器端异步加载数据的实现。这是视图（api 和视图一起）：

class Home extends React.Component {
  constructor(props) {
    super(props); 
    this.state = {meta: []};
  }

  componentDidMount() {
    Request.get('http://example.com/api/users').then((resp) => {
      this.setState({meta: resp.body});
    });

  }

  render() {
    return (
      <div>
        {this.state.meta.map((m, i) => {
          <p key={i}>{m.user}</p>
        })}
    );
  }
}

路由器文件（router.js）：

export default (
    <Route component={App} path="/">
        <IndexRoute component={Home}/>
    </Route>
);

这就是我在服务器上使用的（带有 react-router）

app.use((req, res) => {

    Router.match({routes: routes, location: req.url}, (err, redirectLocation, renderProps) => {
        if(err) res.status(500).send(err.message);

        else if(redirectLocation)
            res.status(302).redirect(redirectLocation.pathname + redirectLocation.search);

        else if(renderProps) {
                var html = ReactDOM.renderToString(<RouterContext {...renderProps}/>);
                res.render("layout", {body: html});
        }
        else res.status(404).send("Page not Found");
    })
});

我知道一些基本的东西，可以将 api 调用附加到每个路由器 url，然后再解析 renderToString()。但是我不明白如何使用 react-router 来做到这一点。我不想使用任何库或 flux 或 redux 实现。

Answer 1

你可以使用react-router中的getComponent道具来处理这种情况。

//route.js
  function fetchAndGetComponent(location,callback){
    Request.get('http://example.com/api/users').then((resp) => {
      let meta = resp.body;
      callback(null,() => <Home meta={meta} />);
    });
  }

  <Route component={App} path="/">
        <IndexRoute getComponent={fetchAndGetComponent}/>
  </Route>

如何使用异步数据在服务器端渲染组件

How to render component in react server side with async data

javascript

reactjs

react-router

server-rendering