首页 文章

React Router - 无法在路由中使用MATCH PARAMS和app状态

提问于
浏览 次
1

我正在React Build 一个设计组合 . 投资组合数据处于应用状态 .

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) ，道具包括MATCH PARAMS（url栏的值），但不包括app状态 . 但如果我像这样配置它......

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

道具包括应用程序状态，但不包括MATCH PARAMS .

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

javascript reactjs react-router

2 回答

  • 0

    你忘了传下 Route 道具

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

    render prop需要一个组件 . 您正在传递组件但不转发任何道具 . 我想你的意思是：

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

    // or {...routeProps} to pass everything
  />
}/>
    回复于

相关问题