React Router v4`Match`渲染非预期组件

时间:2016-10-18 17:41:31

标签: reactjs react-router

我正在尝试使用React Router v4 创建基本的 RESTful路由,在完成文档几次之后,这就是我想出来的。

正在发生的事情是/venues/new等路径也与/venues/:id匹配,因为它将其视为动态参数。

我尝试过使用带有和没有exactly的匹配,键入整个路径名而不是插入道具中的值,所有都给出相同的行为。

从我的Rails时代起,我记得路由器正在捕获第一个匹配,但我不确定如何绕过标准RESTful路由的这些多个匹配。感谢您的任何意见!

render() {
  const { pathname } = this.props;
  return (<div>
    <h1>VENUES</h1>
    <Link to={`${pathname}/new`}><button>New Venue</button></Link>

    <Match exactly pattern={`${pathname}`} render={(mprops) => (<VenueList {...mprops} venues={venues} />)} />
    <Match exactly pattern={`${pathname}/new`} render={() => (<VenueNew onSubmit={this.addVenue} />)} />
    <Match exactly pattern={`${pathname}/:id/edit`} render={(mprops) => (<Venue {...mprops} venue={venue} edit={true} />)} />
    <Match exactly pattern={`${pathname}/:id`} render={(mprops) => (<Venue {...mprops} venue={venues} />)} />
    <Miss render={() => (<h3>No Route</h3>)} />
  </div>);
}

0 个答案:

没有答案