使用反应路由器4延迟渲染嵌套路由

Question

我在Messages有一个父组件/messages，在Message有一个子组件/messages/:id。 Messages使用promise获取所有消息。当我访问/messages时，它会呈现所有消息，然后单击消息，呈现子组件。

但是，当我直接访问/messages/:id时，首先安装子组件，然后安装父组件。有没有办法首先渲染父组件，完成承诺执行然后渲染子项？

以下是组件：

讯息

class Messages extends React.Component {
  componentWillMount () {
    fetchMessages()
      .then(messages => dispatch(setMessages(messages));
  }
  render () {
    return <div>
      <Route path='/messages/:id' component={Message} />
    </div>;
  }
}

消息

const Message = ({
  message
}) => {
  return <div>{message}</div>;
};

function mapStateToProps (state, ownProps) {
  return {
    message: state.messages.find(msg => msg.id === ownProps.match.params.id)
  };
}

export default connect(mapStateToProps)(Message)