Reactjs 优化多页的页面加载

我有一个多页面的网站。我创建了一个包含所有文本/段落/图像的组件。我已将此组件引用到所有多个页面。我使用了一个类名，通过css将内容隐藏/显示到各个页面。问题是页面加载很慢。由于所有内容都是使用css隐藏的，所以它们仍然被加载，这使得我的网站速度变慢。非常感谢您在这方面的任何帮助。谢谢

您可以查看多种内容

检查互联网连接，我希望你有良好的互联网连接来加载 页面

正如您所说，有多个页面包含单个组件，请检查是否可以将这些页面移动到子组件中

我不确定您是如何隐藏这些组件的。如果这些组件很轻，请使用css属性

display:none

您可以使用以下内容：

<style type="text/css">
  .hidden { display:none; }
</style>

render: function() {
return (
  <div className={this.props.shouldHide ? 'hidden' : ''}>
    This will be hidden if you set <tt>props.shouldHide</tt> 
    to something truthy.
  </div>
 );
}
// or in more modern JS and stateless react
const Example = props => <div className={props.shouldHide}/>Hello</div>

.hidden{显示：无；}
render:function（）{
返回(
如果设置props.shoulhdide，则此选项将被隐藏
去做一些真实的事情。
);
}
//或者在更现代的JS和无状态应用程序中
const Example=props=>Hello

---

感谢您的回答。我不想隐藏东西，因为内容很重。同时，内容应在单个组件中，以便于访问。是否有方法仅返回相应页面所需的内容部分。谢谢，所以这应该返回page1 content const ContentComponent=（）=>{return（page1={/contents/}）}。怎么做这样的事