如何使用React Router将道具传递给非子组件？

Question

我有一个传统上无法从父组件继承props的组件。 该组件是通过路由而不是父级呈现的，我说的是<Single />组件，它是此设置中的“详细”组件：

  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={ProfileList} />
      <Route path="/profile/:username" component={Single} /></Route>
  </Router>

可以在ProfileList组件中使用道具，并且该组件将呈现一个Profile组件，如下所示：

   /* ProfileList render method */
   render() {
      return (
        <div>
          {this.state.profiles.map((profile, i) => 
            <Profile {...this.state} key={i} index={i} data={profile} />)}
        </div>
      );
    }

我正在尝试在ProfileList和Single组件中重用Profile组件：

  <Link className="button" to={`/profile/${username}`}>
   {name.first} {name.last}
  </Link>

但是在Single组件中，我无法访问state或props -因此，我无法呈现此详细信息视图。 我知道我可以使用redux传递全局状态，也可以在Link to=""使用查询参数

但是我还不想进一步尝试redux，也不希望查询参数正确。 那么，如何在Single组件中访问诸如this.props.profiles内容？

Answer 1

redux connect（）可以完全完成这项工作。 我认为您应该使用它，因为“很好”，您将重新实现redux连接，例如