react-router-dom 中的<Route/>怎样自定义传数据

Question

使用react-router-dom的<Route/>标签，怎样在组件之间传递数据？（不使用redux这类状态机的情况下）

两组件间正常可以这么传数据

getDataFromSub = (data) =>{
    // 从子组件接收数据
    console.log(data)
}

<div>
    父组件
    <div>
        <SubComponent setDataToParent={this.getDataFromSub}/>
    </div>
</div>

state={
    data:[
        {id:1,value:'aaa'},
        {id:2,value:'bbb'},
        {id:3,value:'ccc'},
    ]
}

//向父组件传数据
this.props.setDataToParent(this.state.data)

<div>
    子组件
</div>

但是使用Route标签后就不可以这样传数据了

<div>
    父组件
    <div>
        // 路由这么写报错 好像不接受自定义的属性
        <Route path={'/get_data'} component={SubComponent} setDataToParent={this.getDataFromSub} />
    </div>
</div>

Answer 1

1. Url parameters：定义路由用/:id这种形式定义，获取可以用match.params.id获取
2. Query parameters：将参数加在路由后面，比如/account?name=netflix，获取就自己获取吧
3. history.push(path, [state]) ：push的第二个参数可以传输任意对象，取出来应该是在location.state中

Answer 2

可以使用router的query state方式传参，其中要注意的是浏览器刷新之后query state会丢失