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}/>}/>