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

发布时间：2020-12-15 16:20:56 所属栏目：百科来源：网络整理

导读：我正在写一个React-on-Rails(第5版)应用程序并遇到了问题.当我访问路径accounts /：account_id / letters / new时,React-Router正在挂载EmailShowComponent,当我希望它挂载EmailSendComponent时. 这是我的app.js文件： Router history={browserHistory} Rout

我正在写一个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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!