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

Question

I want to use URL paths for my app. Currently I just render a Main component in app.js :

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

(The props are a bunch of variables and functions)

I tried using react-router but I don't understand how to send props to the child components.

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

The problem is that I need some state variables of my App component (in app.js ) to be available in both Main and Join . How do I achieve that with a router?

App structure:

App
 - Join
 - Main
   - ...

Answer 1

You can use standard URL parameters. For example, to pass an ID:

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

You'll need to use browserHistory:

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

Then use this.props.params.id on Join .

Here's a more in-depth explanations https://stackoverflow.com/a/32901866/48869

Answer 2

It depends how you are managing your state. if you use the Redux, you don't need to pass props in router, you can simple access redux in any component using connect, However if you don't use react then you can use the Redux router's hierarchy functionality

Assume you have a route something like this

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

when you access the path

/student/class

React router will load the classHome component as children of StudentHome and you can simple pass props to classHome component.

you student class Render method will be something like

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>
}

more details about passing props to children: How to pass props to {this.props.children}