Question

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

Answer 1

在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。前一种语法错了。

Answer 2

我认为获取额外数据的更好方法是ajax。

但是如果你想要你的方法，我检查链接的API，我找到一个查询属性。

query:

An object of key:value pairs to be stringified.

所以你可以使用它将key：value的对象传递给下一个路由，但是这个对象将被字符串化并通过我认为的url传递。我更喜欢ajax。

React路由器，用Link传递道具

2 个答案: