反応ルータが間違ったコンポーネントをマウントする

Question

私はReact-on-Rails（v.5）アプリケーションを作成していますが、問題が発生しています。私がEmailSendComponentをマウントしたい場合は、accounts/:account_id/letters/newのパスを訪問すると、React-RouterはEmailShowComponentをマウントしています。

これは私のapp.jsファイルです：これは私のmain.jsファイルです

<Router history={browserHistory}> 
    <Route path="/accounts/:id" component={AccountShowContainer} /> 
    <Route path="/accounts/:account_id/letters/:id" component={EmailShowComponent} /> 
    <Route path="/accounts/:account_id/letters/new" component={EmailSendComponent} /> 
</Router> 

：

import 'babel-polyfill'; 
import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App'; 

$(function(){ 
ReactDOM.render(
    <App />, 
    document.getElementById('app') 
) 
}); 

そして、私が生成する関連するHTMLページのそれぞれの内側"<div id="app">"タグを配置しましたルータのためのそれらのパス。

これを引き起こす原因は何ですか？

Answer 1

パス/accounts/:account_id/letters/newもパス/accounts/:account_id/letters/:idを満たしているという問題があります。差はidで、"new"になります。

<Router history={browserHistory}> 
    <Route path="/accounts/:id" component={AccountShowContainer} /> 
    <Route path="/accounts/:account_id/letters/new" component={EmailSendComponent} /> 
    <Route path="/accounts/:account_id/letters/:id" component={EmailShowComponent} /> 
</Router> 

---

は、詳細情報については、公式ドキュメントからthe Precedence sectionをチェックアウト：最後に

、ルーティングアルゴリズムの試み

すると、この問題を解決するには、単にあなたのルートの順序を入れ替えます の順序でルートを一致させるために、上から下に定義されています。したがって、兄弟ルートが2つある場合は、 は、の後ろの兄弟と一致する可能性のあるすべてのpathと一致していないことを確認する必要があります。例えば、ははこの行いません。

<Route path="/comments" ... /> 
<Redirect from="/comments" ... />