react-routerで複数のパスにマッチするときの挙動について

Question

###前提・実現したいこと
react-routerを利用して、以下のような設計を想定しています。

<Router>
  <Route path='/aaa' component={ ComponentA } />
  <Route path='/bbb' component={ ComponentB } />
  <Route path='/:uid' component={ User } />
</Router>

特定のパスに一致した場合はそのコンポーネントをマウントし（/aaaならComponentA)、それ以外の場合(例えば/ccc)は/:uidにマッチしたとみなしてUserコンポーネントをマウントしたいと考えています。

###発生している問題

上のソースコードのように実装した所、/aaaにアクセスした場合はComponentAをマウントしてほしいのですが、全て/:uidの方にマッチしてしまいます。

react-routerはそもそも複数のパスにマッチすることを想定していないのでしょうか？

Answer 1

質問のソースコードの場合はうまくいったのですが、ネストした場合にネスト内部のパスにうまくマッチしないようでした。
以下のように、認証の処理を行うコンポーネントで子のコンポーネントを囲うということを実現したかったのですが、うまくいかなかったのでネストにするのをやめました。

// /aaaにアクセスした場合に/:cccに対応するコンポーネントがマウントされる
<Router>
  <Route component={ Auth }>
    <Route path='/aaa' component={ ComponentA } />
    <Route path='/bbb' component={ ComponentB } />
  </Route>
  <Route path='/:ccc' component={ ComponentC } />
</Router>

Answer 2

ググってみたら、一つ親のコンポーネントを

<Router>
  <Route path="/" Handler={ App }>
    <IndexRoute component={ User } />
    <Route path="aaa" component={ ComponentA } />
    <Route path="bbb" component={ ComponentB } />
  </Route>
</Router>

な感じの書き方を見つけた。