我使用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。