Weitergabe von Requisiten beim Verknüpfen mit derselben Realkomponente

Question

Ich möchte auf die gleiche Komponente verlinken, indem ich auf verschiedene Links klicke, aber je nach dem Link, auf den ich klicke, möchte ich verschiedene Dinge zurückgeben.

so habe ich dies:

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

Da ist in meinem machen Ich habe diese

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

, dass die Kanalkomponente ruft:

export default class Channel extends React.Component{ 

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

    ) 
    } 
} 

Aber ich will es die Rückkehr Wert der Prop foo, aber jedes Mal, wenn es "General" zurückgibt. Wie kann ich das Routing mit dem <Link to Teil verknüpfen?

Answer 1

Ihre Pfade sollten anders sein. Beide Routen haben path="channel" und nur die erste Route wird von react-router registriert. So etwas wie:

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

Und Ihre Links sollten sein:

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