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">"
标签路由器的这些路径。
任何想法可能会造成这种情况?
答
问题是路径/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" ... />
+1
谢谢,这工作得很好! – John
你的路由的顺序;没有什么说'new'不是一个有效的ID。 –