react-router v4 如何静态传值给子组件

Question

我是从Vue转过来的，可能思路有点受限吧，如果有其他思路请指正

在我想对一个组件进行多次渲染时，需要传入一个id值来让组件渲染不同内容，
但是<Route>没办法静态的传值给子组件

class Home extends Component{
  render(){
    let listData = Object.values(this.props.directory);
    return(
      <div className="home">
          <ul className="row home_content">
            {
              listData.map((list, key) => (
                <li className="ome_list" key={key}>
                  <Route exact path="/" component={Label} listid={list.id}/>
                </li>
              ))
            }
          </ul>
      </div>
    )
  }
}

子组件

class Label extends Component{
  render(){
    const list = this.props.directory[this.props.listid];
    return(
      <div className="mlabel">
        <h3 className="mlabel_title">{list.title}</h3>
        <ol className="mlabel_content">
          <li className="mlabel_content_list">list.text[0]</li>
          <li className="mlabel_content_list">list.text[1]</li>
        </ol>
      </div>
    )
  }
}

我的思路是在Home组件 <Route>里 传入listid给子组件，
然后在子组件Label里 获取listid 然后去state里找对应的数据渲染组件，
但是子组件里 this.props.listid 是undefined

我知道可以通过URL、query、state这种通过<Link>方法传值，但无法解决我遇到的问题

所以想问问，有什么方法可以静态不经跳转的传值给子组件

Answer 1

react-router v4的route组件有一个render属性，可以用它来传递自定义参数:

将

component={myComp}

改为

const Child = function({title, handleClick}) {
    return (
        <div>
            <button onClick={handleClick}>{title}</button>
        </div>
    )
}

class Test extends Component {

    handleClick = (e) => {
    
    }

    render() {
        <div>
            <Route 
                path="/test/child" 
                render={(props) => (
                    <Child 
                        {...props} 
                        title='hi' 
                        handleClick={this.handleClick} 
                    />
                )} 
            />
        </div>
    }
}