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

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> 

调用通道组件：

export default class Channel extends React.Component{ 

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

    ) 
    } 
} 

但我想它返回prop foo的值，但每次返回“General”。我如何将路由连接到<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>