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

Posted 2023-02-22

【中文标题】将道具传递给路由器内部的组件

【英文标题】：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
   - ...

【参考方案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://***.com/a/32901866/48869

【讨论】：

我需要传递几个变量以及一些函数，所以不幸的是我认为这种方法行不通。

在这种情况下，用您想要发送的内容更新您的问题，以便更容易理解。