반응 라우터가 잘못된 구성 요소를 탑재합니다.

Question

React-on-Rails (5 절) 앱을 작성 중이며 문제가 있습니다. accounts/:account_id/letters/new 경로를 방문하면 React-Router는 EmailSendComponent을 마운트 할 때 EmailShowComponent을 마운트합니다.

이 내 app.js 파일 : 나는 생성 관련 HTML 페이지의 각 내부 "<div id="app">" 태그를 배치 한

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

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

그리고이 내 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> 

입니다 라우터에 대한 경로.

어떤 원인 일 수 있습니까?

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 체크 아웃 : 마지막으로

, 라우팅 알고리즘을 시도

것은이 문제를 해결하려면, 단순히 경로의 순서를 교체 순서대로 경로를 일치 시키려면 위에서 아래로 정의해야합니다. 따라서 형제 경로가 두 개있는 경우 은 첫 번째가 과 일치하도록 가능한 모든 path과 일치하지 않아야합니다.이 작업을 수행하지 예를 들어, 는 않습니다

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