Javascript 反应加载新页面

我正在尝试使用按钮加载不同的React组件。它在使用Firebase使用GitHub进行身份验证时起作用，但不适用于此页面

import React from 'react';
import './index.css';
import GamePage from '../Game';

class Home extends React.Component {
  constructor(props){
    super(props);
    this.LoadGamePage = this.LoadGamePage.bind(this);
  }
  LoadGamePage() {
    return(
      <div>
        <GamePage />
      </div>
    )
  }
  render(){
    return(
      <div className="home">
        <h1>Home Page</h1>
        <button onClick={this.LoadGamePage}>Play PIT</button>
      </div>
    )
  }
}

export default Home;

从“React”导入React；
导入“./index.css”；
从“../Game”导入游戏页面；
类Home扩展了React.Component{
建造师（道具）{
超级（道具）；
this.LoadGamePage=this.LoadGamePage.bind（this）；
}
LoadGamePage（）{
返回(
)
}
render（）{
返回(
主页
操场
)
}
}
导出默认主页；

---

我的LoadGamePage功能有什么问题吗？

它应该如何工作？您有一个onclick处理程序，它调用一个类方法。名为

LoadGamePage

的类方法返回JSX。好的，但是现在怎么办？它被退回了，但是。。。没有渲染。它不会在任何地方显示。我建议你做什么？我不会在处理程序中返回JSX，而是设置状态并根据状态呈现游戏页面

class Home extends React.Component {
  constructor(props){
    super(props);

    this.state = {
      gameVisible: false,
    }

    this.LoadGamePage = this.LoadGamePage.bind(this);
  }

  LoadGamePage() {
    this.setState({ gameVisible: true });
  }

  render() {
    if (this.state.gameVisible) {
       return <GamePage />
    }

    return (
      <div className="home">
        <h1>Home Page</h1>
        <button onClick={this.LoadGamePage}>Play PIT</button>
      </div>
    )
  }
}

class Home扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
gameVisible:false，
}
this.LoadGamePage=this.LoadGamePage.bind（this）；
}
LoadGamePage（）{
this.setState（{gameVisible:true}）；
}
render（）{
if（this.state.gameVisible）{
返回
}
返回(
主页
操场
)
}
}