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}/>

但这也没有用。尽量不必在该路径中添加额外的字符串以使其工作。任何 thoughts/ideas?

Answer 1

答案很简单，Switch 在第一个匹配的路线后停止，所以你可以重新安排你的路线，比如

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

React Router 4 Nested Routes Clashing