我使用React Router导航到我的应用中的页面,如下所示:
<Link to={`/single/${this.props.data.pageId}`} params={{singleId: 1}}>GotoPage!</Link>
这样可以正常工作,但我还希望将其他属性传递给新页面。
在不使用Link的情况下渲染组件时,我会执行以下操作:
<MyComponent myProp={this.props.data}/>
我已尝试将myProp={this.props.data}
传递给这样的参数:
<Link to={`/single/${this.props.data.pageId}`} params={{singleId: 1, myProp={this.props.data}}}>GotoPage!</Link>
但它似乎不起作用,因为myProp在新页面上未定义,与pageId相反,我可以得到:
this.props.params.pageId;
我不应该能够使用Link
传递非路由相关参数吗?
答案 0 :(得分:2)
在Link
param
以及来源中,没有提到它router.push()
。但是我得到了你想要做的事情。
我建议使用react-router的历史记录功能class Foo extends React.Component {
...
const handleNewRoute = () => {
let { pageId } = this.props.data
let singleId = '1'
this.context.router.push({ // use push
pathname: `/single/${pageId}`,
query: { singleId }
})
}
render() {
return (
<button onLeftClick={this.handleNewRoute} />
)
}
}
,而不是硬编码路由。做这样的事情:
...{{singleId: 1, myProp={this.props.data}}}...
顺便说一句,在React / JSX中,像<Link...foobar={{singleId: 1, myProp: this.props.data}}>
这样的东西应该是DateTimeOffset
。前一种语法错了。
答案 1 :(得分:1)
我认为获取额外数据的更好方法是ajax。
但是如果你想要你的方法,我检查链接的API,我找到一个查询属性。
query:
An object of key:value pairs to be stringified.
所以你可以使用它将key:value的对象传递给下一个路由,但是这个对象将被字符串化并通过我认为的url传递。我更喜欢ajax。