将道具传递给路由器内部的组件答案

【问题标题】：Passing props to component inside router将道具传递给路由器内部的组件
【发布时间】：2017-05-29 16:40:01
【问题描述】：

我想为我的应用使用 URL 路径。目前我只是在app.js 中渲染一个Main 组件：

render() {
  return (
    <Main 
      isLoggedIn={this.state.isLoggedIn}
      user={this.state.user}
      ... />
  )
}

（props是一堆变量和函数）

我尝试使用react-router，但我不明白如何向子组件发送道具。

<Router history={browserHistory} >
  <Route path='/' component={Main}
    ... where to send props? />
  <Route path='join' component={Join}
    ... props />
</Router>

问题是我需要我的App 组件（在app.js）的一些状态变量在Main 和Join 中都可用。如何使用路由器实现这一目标？

应用结构：

App
 - Join
 - Main
   - ...

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

这取决于您如何管理您的状态。如果你使用 Redux，你不需要在路由器中传递 props，你可以使用 connect 简单地访问任何组件中的 redux，但是如果你不使用 react 那么你可以使用 Redux 路由器的层次结构功能

假设您有类似这样的路线

<route path="/student" component={studentHome}>
   <route path="/class" component={classHome} />
</route>

当你访问路径时

/student/class

React 路由器会将 classHome 组件加载为 StudentHome 的子组件，您可以简单地将 props 传递给 classHome 组件。

你的学生类的渲染方法会是这样的

render(){
     const childrenWithProps = React.Children.map(this.props.children,
     (child) => React.cloneElement(child, {
       doSomething: this.doSomething
     })
    );

    return <div> some student component functionality
                <div>
                 {childrenWithProps}
                </div>
           </div>
}

有关将道具传递给孩子的更多详细信息： How to pass props to {this.props.children}

【讨论】：

我需要将我的状态保持在 Main 和 Join 之上一个级别，但我不知道使用这种方法会如何工作。 Main 和 Join 在不同的路径上，但需要访问相同的 props。
我实际上设法通过将状态向下移动一级（到 Main）来解决它，并将 Main 作为其余路由/组件的容器路由。谢谢。

【解决方案2】：

您可以使用标准 URL 参数。例如，传递一个 ID：

<Route path='join/:id' component={Join}/>

您需要使用 browserHistory：

browserHistory.push(`/join/${id}`);

然后在Join 上使用this.props.params.id。

这里有更深入的解释https://stackoverflow.com/a/32901866/48869

【讨论】：

我需要传递几个变量以及一些函数，所以不幸的是我认为这种方法行不通。
在这种情况下，用您想要发送的内容更新您的问题，以便更容易理解。