React Router动态传递道具

Question

我的目标是使用以下代码将值从一个组件传递到另一组件：假设我在example.com/iamhere，然后转到example.com/anotherpage，我想将this.state的值传递给我。 myProp到另一条路线。

我正在一个有一些现有代码的项目中，我有这个：

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;
    }
  });
};

我需要传递一个道具，就像这样的例子：

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

请注意，我希望将myProp的值传递给它去的下一个路由。 根据git hub上的帖子。 就像我在上面所做的那样，然后在子路径中使用this.props.route.myProp。 但是，这不起作用，它显示为undefined。

有人建议：

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

但是如何将上面代码中列出的动态路由组件传递给它呢？

知道如何实现吗？

Answer 1

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

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