Question

我想为我的应用使用网址路径。目前，我只是在Main中呈现app.js组件：

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

（道具是一堆变量和功能）

我尝试使用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
   - ...

Answer 1

您可以使用标准网址参数。例如，要传递ID：

rstrip()

您需要使用browserHistory：

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

然后在browserHistory.push(`/join/${id}`);上使用this.props.params.id。

以下是更深入的解释https://stackoverflow.com/a/32901866/48869

Answer 2

这取决于你如何管理你的州。如果您使用Redux，您不需要在路由器中传递道具，您可以使用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}

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

2 个答案: