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.我想全部替换页面组件应该怎么做？

Answer 1

添加Switch，并且将City的Route移到和父组件同级上面

import {Switch} from 'react-router-dom';
<Switch>
    <Route exact path={`/city`} component={City}/>
    <Route exact path={`/parent`} component={parent}/>
</Switch>

Answer 2

楼主你解决了吗？
以前routerV3的时候，因为所有router都配置在一起嵌套，Link随便怎么跳都OK
现在V4中，子路由跳父路由的兄弟路由，就跳不过去，只是URL地址变了。Link貌似只能跳同级路由和子级路由

Answer 3

 <Redirect from='/old-path' to='/new-path'/>

Answer 4

楼主，不知道这个问题解决了没有，我最近也遇到了这个问题