如何向路由组件中传入props

父组件向其中包含路由组件传值方式

image.png

我开始使用了高阶组件 包裹子组件 传入props 然后传给Route

componentAddProps=(Wrap)=>()=>{
        const props=this.props;
        return (
            <Wrap
                {...props}
            />
        )
    }
<div className="container">
    <Route path="/set" component={this.componentAddProps(UserManage})/>
</div>
//这里用了多重箭头函数，返回了一个函数，函数内部再返回这个子组件，因为Route的
//component组件只接收函数

然后在子组件中可以接收到父组件传入的props

但是有个大问题，在componentDidMount函数中不能调用父组件中可以改变props值的函数，不然会引起子组件重复渲染然后再度调用函数的循环。但是除了在生命周期函数中，其它时候可以调用，比如子组件挂载好之后的某个动作触发函数，这没问题。

所以在react-redux项目中 使用container容器包裹子组件传递props值 是最好的办法

<div className="container">
    <Route path="/set" component={UserManageCtnr}/>
</div>

如果只是向路由组件传入简单的字符串

<NavLink to={`${UPPER_PATH}/user:1`} activeClassName="current">用户管理</NavLink>
<Route path="/user:id" component={SomeComponent} />
通过this.props.params.id就可以获取传入的id 但是会明文显示在浏览器上面

如果是向路由组件传入对象 重点是JSON化对象

<Route path='/index/:data' component={SomeComponent} />
var data = {id:3,name:sam,age:36};
data = JSON.stringify(data);
var path = `/user/${data}`;