如何将附加参数传递给我要转换到的组件。
我的routes.js 如下。我声明了两条路径,一条用于authorList,另一条用于特定作者的详细信息。
var routes = (
<Route path="/" component={require('./components/main')}>
<Route path="authors" component={require('./components/authors/authorPage')}/>
<Route path="authors/:authorId" component={require('./components/authors/AuthorDetails')}/>
</Route>
);
module.exports = routes;
在我的authorList页面中有如下功能。
showAuthorDetails(authorId) {
var myExtraParams = { key1 : val1, key2 : val2};
hashHistory.push(`/authors/${authorId});
}
现在在我的 AuthorDetail 页面中,我可以通过执行以下操作来获取authorId
this.props.params.authorId
但我也想将 myExtraParams 作为对象传递,但不想在 url 中声明和传递它。
我想以某种方式访问新组件中的 myExtraParams,也许可以这样说
this.props.params.myExtraParams
应该给 mt 对象。 (就像在 Angular UI 路由器中使用 stateParams 发生的方式一样)
我怎样才能做到这一点?
您可以尝试更改路线的结构,如下所示:
var routes = (
<Route path="/" component={require('./components/main')}>
<Route path="authors" component={require('./components/authors/authorPage')}>
<Route path="author/:authorId" component={require('./components/authors/AuthorDetails')}/>
</Route>
</Route>
);
然后在你的authorList页面你可以做
...
renderAuth() {
if (this.props.children === null) {
return(
....your default authorList
)
} else {
return React.cloneElement(this.props.children || <div />, {myExtraParams: myExtraParams});
}
}
render() {
<div>
{this.renderAuth()}
</div>
}
showAuthorDetails(authorId) {
hashHistory.push(`/authors/author/${authorId});
}
...
然后,您应该能够在authorsDetail页面中访问this.props.myExtraParams
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)