reactjs - React-router 安装了错误的组件

Question

我正在编写 React-on-Rails (v. 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>

<小时/>

有关更多信息，请查看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:

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