请问，react如何做到多个页面的切换呢？

Question

请问一下，
现在有一个想法如下：
在区域2中，有很多页面，1,2,3等，

我点击1,2,3 这些按钮，主区域就展示对应的页面：
如下所示：

pages/
  page1.tsx
  page2.tsx
  page3.tsx
  ...

这个应该可以通过{children}来做到：

<PageContent children={children}></PageContent>

但是现在有一个问题就是：
详情面板也需要跟着变化，
请问也是和主区域一样的原理进行{children}的设置吗？

Answer 1

https://4x-ant-design.antgroup.com/components/tabs-cn/

看看这个

Answer 2

可以传值2个子集进去，需要封装一个父组件容器

const App = () => <Component child1={<Item1 />} child2={<Item2 />} />

const Component = ({child1, child2}) => {
  return (
    <div>
      <div className="data1">
        {child1}
      </div>
      <div className="data1">
        {child2}
      </div>
    </div>
  )
}

const Item1 = () => <p>Item 1</p>
const Item2 = () => <p>Item 2</p>

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>