在将组件路由到ReactJS中的另一个组件后，如何取消渲染该组件？

class MyComponent extends React.Component {
  componentDidMount() {
    // 在组件挂载后，进行路由操作
    // ...
  }

  componentWillUnmount() {
    // 在组件即将被卸载前，取消渲染操作
    // ...
  }

  render() {
    // 组件的渲染逻辑
    // ...
  }
}

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      shouldRenderChild: true, // 控制子组件的渲染
    };
  }

  handleClick() {
    this.setState({ shouldRenderChild: false }); // 点击按钮后取消渲染子组件
  }

  render() {
    return (
      <div>
        {this.state.shouldRenderChild && <ChildComponent />}
        <button onClick={() => this.handleClick()}>取消渲染</button>
      </div>
    );
  }
}