<div>
<ul>
<li>
<Link to={this.fatherPath + "/aaa"}>aaa</Link>
</li>
<li>
<Link to={this.fatherPath + "/bbb"}>bbb</Link>
</li>
<li>
<Link to={this.fatherPath + "/bbb/ccc"}>ccc</Link>
</li>
</ul>
<Switch>
<Route path={this.fatherPath + "/aaa"}>
<div>aaa</div>
</Route>
<Route exact path={this.fatherPath + "/bbb"}>
<div>bbb</div>
</Route>
<Route path={this.fatherPath + "/bbb/:id"}>
<div>ccc</div>
</Route>
</Switch>
</div>
此处需要注意的是第二个Router,需要加exact属性。第三个路由才能正确匹配到/bbb/ccc,否则路由匹配到/bbb就不再往下匹配了。或者把第二第三个路由调换位置,也可以正确匹配到ccc。
测试第二个路由如果写成/bbb(/:id),什么都匹配不到,还在研究这种匹配方式。