是否可以通过React Router将Link中的props从组件传递到Link的组件？

Question

This is the code I want to do from the parent Component Home:

class Home extends Component {
render() {
    const { environment } = this.props; // <-- this is the props I want to pass
    <Link environment to="/register"> // <-- this is what I want to do
     <RaisedButton label="Register" style={{ margin: 12 }} />
    </Link>
}

And this is my React Router configuration code:

ReactDOM.render(
   <BrowserRouter>
      <div>
      <Route exact path='/(index.html)?' component={Home}/>
      <Route  path='/register' component={Registration}/>
      </div>
    </BrowserRouter>,
  mountNode
);

There's a prop from the parent component Home that I want to pass on Registration component, How do I do that?

Answer 1

You can pass a state in the Link to object like so:

 <Link to={{
  pathname: '/register',
  state: { linkState: this.props.myProp }
}}/>

Then in the Registration component you can access this state like so:

this.props.location.state.linkState

For more info see: https://reacttraining.com/react-router/web/api/Link