如何在 React 中创建列表/详细信息视图

Question

我需要在 React 中为 Web 应用程序实现一种主/详细视图。由于应用程序应该集成到 CakePHP 应用程序中，我不能使用 React Router 来处理路由（因为 CakePHP 会处理它们）。

我有一个项目列表，想浏览它们，显示详细信息视图。项目是嵌套的，因此需要导航到子项目。

现在我有一个 ItemList 组件，显示带有点击处理程序的卡片列表。如何在不更改 url 的情况下更改视图？

ItemList 组件看起来像：

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

      this.state = {
          itemList: []
      }
  }

  componentDidMount() {
    fetchItems(...)
  }
    
  render() {
    return(
      <div>
        {this.state.itemList.map(item => (
          <Item key={item.id} item={item} />
        ))}
      </div>
    );
  }
}

项目组件看起来像：

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

  this.state = {
    item: props.item,
  }
}

handleClick = () => {
  // How to navigate to another Component?
}

render() {
  return(
    <div>
      <div className="card my-2" onClick={this.handleClick}>
        <div className="card-body">
          <h5 className="card-title">{this.state.item.title}</h5>
          <p className="card-text">{this.state.item.description}</p>
        </div>
      </div>
    </div>
  );
 }
}

提前致谢！