React Router 4嵌套路由冲突

Question

我有以下路线:

<Switch>
  <Route path='/:profileType/:profileId' component={Profile}/>
  <Route path='/about/:aboutThing' component={AboutThing}/>
</Switch>

当我尝试去/about/:aboutThing- 它被认为是一条{Profile}路线.这是有道理的,因为技术上:profileType可以是任何字符串,因此任何嵌套路由都将被识别为Profile.

我想知道是否可以在{AboutThing}不改变路线的情况下进行渲染.从技术上讲,/about应该是该路线的保留字.我试过做:

<Route exact path='/about/:aboutThing' component={AboutThing}/>

但这也不起作用.尝试不必在该路径中添加额外的字符串以使其工作.有什么想法/想法吗？

Answer 1

答案很简单,Switch在第一条匹配的路线后停下来,所以你可以重新排列你的路线

<Switch>
  <Route path='/about/:aboutThing' component={AboutThing}/>
  <Route path='/:profileType/:profileId' component={Profile}/>
</Switch>