react-router安装错误的组件

Question

我正在写一个React-on-Rails(第5版)应用程序并遇到了问题.当我访问路径时accounts/:account_id/letters/new,React-Router正在安装EmailShowComponent,当我想要它安装时EmailSendComponent.

这是我的app.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>

这是我的main.js文件:

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

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

我"<div id="app">"在每个相关的html页面中都放置了标签,为路由器生成这些路径.

知道是什么原因引起的吗？

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>

有关详细信息,请查看官方文档中的"优先级"部分:

最后,路由算法尝试按照它们定义的顺序(从上到下)匹配路由.因此,当你有两个兄弟路线时,你应该确保第一个与path兄弟姐妹可以匹配的所有可能的s匹配.例如,不要这样做:

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