React实现单页面时如何切换内容

Question

最近在学React，想仿这个网站http://m.maizuo.com/v4/，header和sideBar是公共的，因此需要改变的地方主要是{内容区域}，因为我刚开始学React，所以一开始实现 内容区域 切换时，是以下面代码实现的：
点击“区域”或者“用户”按钮时，在事件回调函数执行以下代码:

当点击“区域” 按钮时：
React.render(<CityContent cityArr={cityArr} />,document.getElementById("主内容区域id"))

React就会在开发者工具提示warming: data-reactid会重复，因此我得出的结论是：每次执行React.render方法，data-reactid会重新开始计算（.0开始），所以导致data-reactid重复，所以我这种做法是错的！React.render在整个页面周期只能调用一次？

我的问题是：大家一般是怎么处理这个问题的？ 是点击 "区域"或者"用户"的按钮时，让最上层组件（如整个页面）更改state，然后内容区域组件根据最上层组件的state的值，render: return 不同的 内容（如电影列表、区域选择页、用户页、登录页）？

Answer 1

你需要这个：https://github.com/rackt/react-router

react-router 的 Guide 页也介绍了不实用 react-router 你应该怎么做页面的切换问题：https://github.com/rackt/react-router/blob/master/docs/Introduction.md