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

Question

I want to link to the same component by clicking on different links but I want to return different things depending on the link I click on.

so I have this:

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

Then in my render I have this

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

That calls the Channel component:

export default class Channel extends React.Component{

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

    )
  }
}

But I want it to return the value of the prop foo but every time it returns "General". How can I link the routing to the <Link to part?

Answer 1

Your paths should be different. Both routes have path="channel" and only the first route is registered by react-router. Do something like:

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

And your links should be:

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