通过道具反应路线答案

【问题标题】：Pass props to react routes通过道具反应路线
【发布时间】：2018-06-16 08:02:39
【问题描述】：

我在 Main 中有一个小吃店处理程序，我想将它作为道具传递给每个 Route 组件。我怎样才能做到这一点？

<Router history={browserHistory}>
  <Main history={browserHistory}>
    <Switch>
      <Route path="/comp1" component={comp1} />
      <Route path="/comp2" component={comp2} />
      <Route path="/comp3" component={comp3} />
      <Route path="/comp4" component={comp4} />
    </Switch>
  </Main>
</Router>

【问题讨论】：

标签： javascript reactjs meteor react-router

【解决方案1】：

您可以将组件放置在 Route 中，并在此处传递任何道具。

<Route path="/comp1"><Comp1 myHandler={MyHAndler}/></Route>

Comp1 也可以从Route 获取所有道具。

【讨论】：

【解决方案2】：

你可以传递 props，包括绑定的事件处理程序，就像在 React Router 中这样：

<Route exact path={'/:userId/create-project/:projectId'}  component={() => {
      return (
        <ProjectEditor
          goToDashboard={this.goToDashboard}
          nextProject={this.state.nextProject}
          goToProject={this.goToProject}   
          updateUserProject={api.updateUserProject}              
        />
      )
   }} 
/>

【讨论】：

我建议使用 HOC，因为这里的解决方案可能会重复用于许多共享相同逻辑的组件（snackbar 处理程序）