同じ反応成分にリンクするときに小道具を渡す

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>