Javascript 反应路由器-can'；t在路由中使用匹配参数和应用程序状态

我正在React建立一个设计组合。投资组合数据处于应用程序状态

var portfolioData = [
    {
      key: 1,
      projectName : "project one",
      tags: ["ux", "dev"],
      mdFileName: "p1.md"
    },{
      key: 2,
      projectName : "project two",
      tags: ["ux", "dev"],
      mdFileName: "p2.md"
    },{
      key: 3,
      projectName : "project three",
      tags: ["ux", "dev"],
      mdFileName: "p3.md"
    }
]

我正在使用React Router为每个项目创建一个/project/：projectID路由。将根据URL中的值使用该州的项目，例如website.com/project/1

问题就在这里。如果我像这样配置路由

<Route path="/project/:key" component={Project} />

<Route path="/project/:key" render={()=><Project data={this.state.portfolioData}/>} />

和console.log（this.props），这些props包括匹配参数（url栏的值），但不包括应用程序状态。但是如果我像这样配置它

<Route path="/project/:key" component={Project} />

<Route path="/project/:key" render={()=><Project data={this.state.portfolioData}/>} />

}/>

道具包括应用程序状态，但不包括匹配参数

---

有人知道这个NOOB做错了什么吗？

render

prop接受一个组件。您正在传递组件，但未转发其任何道具。我想你的意思是：

<Route path="/project/:key" render={routeProps => 
  <Project 
    data={this.state.portfolioData} 
    projectKey={routeProps.match.params.key}

    // or {...routeProps} to pass everything
  />
}/>

}/>

你忘了传递

路线

道具

<Route path="/project/:key" render={(props)=> <Project {...props} data={this.state.portfolioData}/>} />

}/>

Yay！令人惊叹的谢谢，伙计