reactjs – react-router安装错误的组件

我正在写一个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页面内的标签,为路由器生成这些路径.

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

问题是路径/ accounts /：account_id / letters / new也满足路径/ accounts /：account_id / letters /：id.差异是id变为“新”.

要解决此问题,只需交换路线的顺序：

<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：

Finally, the routing algorithm attempts to match routes in the order
they are defined, top to bottom. So, when you have two sibling routes
you should be sure the first doesn’t match all possible paths that can
be matched by the later sibling. For example, don’t do this:

06001