如何使用反应路由器将道具传递给非子组件？

Posted 2023-02-22

【中文标题】如何使用反应路由器将道具传递给非子组件？

【英文标题】：How do I pass props to non-child component with react router?

【发布时间】：2016-09-30 04:25:24

【问题描述】：

我有一个组件不能传统上从父组件继承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 - 所以我无法呈现此详细信息视图。我知道我可以use redux for passing global state 或在我的Link to="" 中使用查询参数

但是我还不想接触到 redux 并且对查询参数感觉不正确。那么如何在Single 组件中访问this.props.profiles 之类的内容？

【问题讨论】：

也许路由器参数？ ***.com/questions/32901538/…

no @Brad - 如果你的意思是这样，我不想查询参数

ProfileList 和 Single 是兄弟组件，为什么 Single 不能访问状态？

因为他们是兄弟姐妹而不是父子关系。道具在 ProfileList 中 - 如何将它们传递给 ProfileList 未呈现的单个组件？

【参考方案1】：

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