react-router-dom v4中如何跳转子路由？

Question

如图我用的react作为开发工具，在一个主组件红色中嵌套了一个，一个子组件绿色组件，它又有一个子组件黑色椭圆。如何做到在点击了椭圆组件里面的Link后，让整个页面的父组件跳转到另外一个组件City,我在黑色椭圆组件中代码如下

   <Router> 

         <div>

        <Link to={`/city`}><div className="float-left home-header-left">{this.props.cityName}<i className="icon-ctrl"></i></div></Link>

       <Route exact path={`/city`} component={City}/>

         </div>

         </Router>

但是点击Link后页面中只会多了一个组件City,其他组件还在页面中,并不是把父组件的父组件直接替换为City.我想全部替换页面组件应该怎么做？