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')
  )
});

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

知道可能导致这种情况的原因吗？

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" ... />

react-router安装错误的组件

1 个答案: