react-router：将 props 传递给使用 <Link /> 渲染的组件

Question

我正在使用 react-router 的<Link />，这样当用户点击链接时，myComponent 就会被渲染。

我的问题是，我怎样才能将道具从Navigation 组件传递到myComponent？这不起作用，但我正在尝试将 element.name 道具从 Navigation 传递给 myComponent。

class Navigation extends Component {
  const items = store.getState().items.map((element, index) =>
    <Link to={element.id} name={element.name}> element.id </Link>
  )

  render() {
    return (
      {items}
    )
  }
}

这是路由设置和组件设置：

<Route path=":id" component={myComponent} />

// I'd like to pass in props to be used here from the Navigation component, for example, a name prop passed through <Link />

class myCompnent extends Component {
  render() {
    return (
      <div>
        <p> hello {this.props.name} </p>
      </div>
    )
  }
}

Answer 1

您可以做的是通过将props 附加到父组件中的组件链接来传递它们，并在子组件中使用componentWillReceiveProps 方法获取它们。

例如：

父组件

<Link to {`element.id/{$element.name}`}>{element.id}</Link>

子组件

componentWillReceiveProps(nextProps) {
    if (nextProps.value !== this.props.value) {
        console.log(this.props); //Here you can fetch the props which you have passed
    }
}

Answer 2

react-router Link

我认为没有办法将道具从 传递给组件，但是使用 Link 的“查询”参数可以通过路径传递一些东西，它将作为查询添加到路径上，例如：？姓名=杰克&aa=bb

<Link to={element.id} query={{ name: element.name }}>{element.id}</Link>

并从组件中的 this.props.location.query 中获取

componentDidMount: function () {
    var query = this.props.location.query;
    if ( query && query.name ) {
        this.setState({
            name: name
        });
    } 
}

// in render
<p> hello {this.state.name} </p>