React Router动态传递道具

Question

My goal is to pass a value from one component to another with the following code: So let's say I'm at example.com/iamhere and I go to example.com/anotherpage I would like to pass the value of this.state.myProp to that other route.

I'm working on a project with some existing code and I have this:

getRoutes = routes => {
  return routes.map((prop, key) => {
    if (prop.layout === "/admin") {
      return (
    <Route
      path={prop.layout + prop.path}
      component={prop.component}
      key={key}
      myProp={this.state.myProp}
    />
      );
    } else {
      return null;
    }
  });
};

I need to pass a prop down, just as an example something like this:

<Route
  path={prop.layout + prop.path}
  component={prop.component}
  key={key}
  myProp={this.state.myProp}
/>

Notice the addition of myProp I wish to pass this value to the next route it goes to. According to a post on git hub . It would be like I did above then in child route I'd use this.props.route.myProp. However that doesn't work, it appears as undefined.

This has been suggested:

<Route exact path="/" render={props => <Component {...props} something={this.state.myProp}/>}/>

But how can I pass the dynamic route component listed in the above code to it?

Any idea how I can achieve it?

Answer 1

一种选择是使用React Router的render prop而不是component ：

<Route exact path="/" render={props => <Component {...props} something={this.state.myProp}/>}/>