链接到相同的反应组件时传递道具

Question

我希望通过点击不同的链接链接到同一个组件，但我想根据我点击的链接返回不同的内容。

所以我有这个：

{this.props.children}
<Link to="channel"> General </Link>
<br />
<Link to="channel"> Random </Link>

然后在我的渲染中我有了这个

<Route path="channel" foo="General" component={Channel}></Route>
<Route path="channel" foo="Random" component={Channel}></Route>

调用Channel组件：

export default class Channel extends React.Component{

  render(){
    return (
      <h1> {this.props.route.foo} </h1>

    )
  }
}

但我想让它返回prop foo的值，但每次它返回＆＃34; General＆＃34;。如何将路由链接到<Link to部分？

Answer 1

您的路径应该不同。两条路由都有path="channel"，并且只有第一条路由由react-router注册。做类似的事情：

<Route path="channel" foo="General" component={Channel}></Route>
<Route path="channel2" foo="Random" component={Channel}></Route>

你的链接应该是：

{this.props.children}
<Link to="channel"> General </Link>
<br />
<Link to="channel2"> Random </Link>