React Router - can't use MATCH PARAMS and app state in route

2
votes

I'm building a design portfolio in React. The portfolio data is in the app state.

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"
    }
]

I'm using React Router to create a /project/:projectID route for each project. The project in the state will be used depending on the value in the URL eg website.com/project/1

Here is the problem. If I configure the route like this...

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

and console.log(this.props), the props includes the MATCH PARAMS (value of url bar), but not the app state. But if I configure it like this...

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

the props includes the app state but not the MATCH PARAMS.

Does anyone know what this NOOB is doing wrong?

2
javascriptreactjsreact-router

2 Answers

3
votes

You forgot to pass down Route props

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

render prop takes a component. You are passing a component but not forwarding any of its props. I think you mean:

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

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