react css异步加载,React异步渲染组件，如何设置Loading效果？

渲染某个页面(组件)，用到的数据需要通过ajax向后台获取，ajax方法一般写在componentDidMount里面，如果不做任何处理，请求数据之后会有一个rerender的过程，导致数据的展现很生硬，如下图：

网络慢的情况下，会先展示第一个页面，数据加载完成后，会“闪跳”到第二个页面，这种交互体验太烂了。。。

我想在数据加载完成之后再显示这个页面，加载之前，设置个loading效果，代码如下：

class Profile extends Component {

constructor(props) {

super(props);

this.state = {

loading: true

};

}

componentDidMount() {

// 数据异步请求，请求成功之后setState

this.setState({

loading: false

})

}

render() {

return (

{

this.state.loading

?

加载中。。。

:

页面内容

}

)

}

}

如果只有几个页面(组件)，在每个页面写一下也无所谓，但是项目中会有很多个页面需要这样的loading，怎么样能统一设置下Loading效果而不用在每个页面都要写一遍？

项目中用到的有React、React Router、Redux，涉及到的方法都可以提一下，谢谢！