React路由器,用Link传递道具

时间:2016-02-15 07:10:43

标签: javascript reactjs

我使用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传递非路由相关参数吗?

2 个答案:

答案 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。