React路由器,用Link传递道具

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. 但我明白你想做什么。

我可以推荐使用react-router的历史功能，而不是硬编码路由router.push()。做这样的事情：

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} />
     )
  }
}

顺便说一下，在 React/JSX 中，类似的东西...{{singleId: 1, myProp={this.props.data}}}...应该是<Link...foobar={{singleId: 1, myProp: this.props.data}}>. 以前的语法是错误的。