javascript - React Router - 无法在路由中使用 MATCH PARAMS 和应用程序状态

Question

我正在 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} />

和console.log(this.props)，props包括MATCH PARAMS(网址栏的值)，但不包括应用程序状态。但如果我这样配置......

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

Prop 包括应用程序状态，但不包括匹配参数。

有谁知道这个菜鸟做错了什么吗？

Answer 1

您忘记传递 Route 属性

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