React组件点击切换问题：点击无法正常显示Previousgames组件

问题根源拆解 #

• 按钮的onClick直接返回<Previousgames/>组件无效，事件处理函数无法通过返回组件触发渲染，必须依赖状态或路由驱动视图更新
• p标签点击后页面空白，是因为父组件的onRouteChange仅修改了路由状态，但当前组件未根据新路由切换显示内容
• 直接写入<Previousgames/>会默认渲染组件，必须通过条件渲染控制显示时机

代码修复方案 #

方案1：组件内状态切换（无需URL跳转） #

如果仅需在当前页面内切换组件显示，用内部状态即可实现：

class FixturePage extends React.Component {
  // 新增状态控制组件显示
  state = {
    showPreviousGames: false
  };

  moveToPreviousgames = () => {
    this.setState({ showPreviousGames: true });
  };

  // 可选：添加返回赛程的逻辑
  backToFixtures = () => {
    this.setState({ showPreviousGames: false });
  };

  render() {
    const { showPreviousGames } = this.state;

    // 根据状态切换显示内容
    if (showPreviousGames) {
      return (
        <div>
          <button onClick={this.backToFixtures}>回到赛程</button>
          <Previousgames />
          <Sponsorbanner/>
          <Legalbanner onRouteChange={this.props.onRouteChange} />
        </div>
      );
    }

    return (
      <div>
        <Helmet>
          <title> Match Fixtures</title>
          <meta name='description' content='with this page users can see all the schedule games'/>
          <meta name='keywords' content=' football, games,red lodge,Sports Pavilion,schedule,fixture,U11'/>
        </Helmet>
        
        <Container className="fixtureContainer">
          <h1 className="fixtureTitle"> Match Fixtures </h1>
          {/* 修正按钮点击事件，调用状态更新函数 */}
          <button onClick={this.moveToPreviousgames}>Previousgames</button>
          <p onClick={this.moveToPreviousgames}>Previousgames</p>
        </Container>  

        <Sponsorbanner/>
        <Legalbanner onRouteChange={this.props.onRouteChange} />
      </div>
    );
  }
}

方案2：路由驱动切换（需URL同步更新） #

如果需要通过URL路由实现页面跳转，确保父组件的onRouteChange能正确传递路由状态：

class FixturePage extends React.Component {
  moveToPreviousgames = () => {
    this.props.onRouteChange('previousgames');
  };

  render() {
    // 从props获取当前路由状态（假设父组件已传递该参数）
    const { route } = this.props;

    // 根据路由判断显示内容
    if (route === 'previousgames') {
      return (
        <div>
          <Helmet>
            <title> Previous Games</title>
            <meta name='description' content='View past match results'/>
          </Helmet>
          <Previousgames onRouteChange={this.props.onRouteChange} />
          <Sponsorbanner/>
          <Legalbanner onRouteChange={this.props.onRouteChange} />
        </div>
      );
    }

    return (
      <div>
        <Helmet>
          <title> Match Fixtures</title>
          <meta name='description' content='with this page users can see all the schedule games'/>
          <meta name='keywords' content=' football, games,red lodge,Sports Pavilion,schedule,fixture,U11'/>
        </Helmet>
        
        <Container className="fixtureContainer">
          <h1 className="fixtureTitle"> Match Fixtures </h1>
          {/* 修正按钮点击事件，调用路由切换函数 */}
          <button onClick={this.moveToPreviousgames}>Previousgames</button>
          <p onClick={this.moveToPreviousgames}>Previousgames</p>
        </Container>  

        <Sponsorbanner/>
        <Legalbanner onRouteChange={this.props.onRouteChange} />
      </div>
    );
  }
}

关键注意点 #

• 禁止在onClick等事件回调中直接返回组件，必须通过状态更新或路由状态变化触发React重新渲染
• 条件渲染是控制组件显隐的核心，可通过if-else、三元表达式或短路运算符实现
• 路由方案需确保父组件的onRouteChange能将路由状态同步到子组件，可通过props、Redux或上下文传递

内容的提问来源于stack exchange，提问作者Riki