react-router安装了错误的组件

我正在编写React-on-Rails（v。5）应用程序，并且遇到问题。当我访问路径accounts/:account_id/letters/new时，React-Router正在安装EmailShowComponent，当我想要它挂载EmailSendComponent时。react-router安装了错误的组件

这是我的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') 
) 
});

而且我放在里面的每个生成相关的HTML页面"<div id="app">"标签路由器的这些路径。

任何想法可能会造成这种情况？

来源

2017-05-04 John

你的路由的顺序;没有什么说'new'不是一个有效的ID。 –

问题是路径/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 s，可以匹配后面的兄弟姐妹。例如，不做到这一点：
<Route path="/comments" ... /> 
<Redirect from="/comments" ... /> 

来源

2017-05-04 15:09:37 Chris

谢谢，这工作得很好！ – John

react-router安装了错误的组件

回答

相关问题