React路由器将特定参数传递给子组件

Question

我有一个令人困惑的问题，我无法弄清楚。我是新来的反应+通量+反应路由器。

我有以下途径：

<Router history={browserHistory} > 
    <Route path="/" component={App}> 
     <IndexRoute component={Search}/> 
     <Route path="/login" component={Login} /> 
     <Route name="client" path="/client(/:clientid)" component={Client}/> 
     {/* <Route name="tel" path="/tel/:telid" component={Tel}/>*/} 
    </Route> 
</Router> 

我希望能够具体PARAMS传递给特定的路由。我知道我可以通过所有PARAMS使用的所有路由：

{this.props.children && React.cloneElement(this.props.children, {...})} 

但是我不希望让子组件访问其他组件状态。理想情况下，我想将loginState传递给登录组件，将searchState传递给搜索组件，将clientState传递给客户端组件。通过上述方法，客户端组件可以访问所有组件状态。

我现在有这个解决办法，但感觉很脏，不是很面向未来：

var React = require('react'); 

var AppStore = require('../stores/AppStore'); 

var browserHistory = require('react-router').browserHistory; 

// Flux cart view 
var App = React.createClass({ 

    getInitialState() { 
     return AppStore.getState(); 
    }, 

    componentWillMount() { 
     if (!this.state.auth.loggedIn) { 
      browserHistory.push('/login'); 
     } 
    }, 
    // Add change listeners to stores 
    componentDidMount() { 
     AppStore.addChangeListener(this._onChange); 
    }, 

    // Remove change listers from stores 
    componentWillUnmount() { 
     AppStore.removeChangeListener(this._onChange); 
    }, 

    // Method to setState based upon Store changes 
    _onChange(){ 
     this.setState(AppStore.getState()); 
    }, 

    // Render cart view 
    render() { 
    console.log(this.props.children); 
    var name = this.props.children.type.displayName; 
    var p; 
    switch(name) { 
     case 'client': 
      p = {clientState: 'test'} 
     break; 
     case 'login': 
      p = {auth: this.state.auth} 
     break; 
    } 
    return (
     <div> 
      {this.props.children && React.cloneElement(this.props.children, p)} 
     </div> 
    ); 
    } 

}); 

module.exports = App; 

关于如何正确做到这一点有什么想法？我已经看了很多谷歌的结果，但大多数回到旧版本的反应和反应路由器。

Answer 1

可以使用named components

...  
<Route path="/login" components={{login:Login}} /> 
<Route path="/client(/:clientid)" components={{client:Client}}/> 
... 

而且在应用组件

class App extends Component { 
    constructor(props){ 
     super(props); 
     this.setProps= this.setProps.bind(this); 
    } 
    setProps(comp, props){ 
     if(!comp) return null; 
     return React.cloneElement(comp, props); 
    } 
    render(){ 
     const {client, login}=this.props; 
     const {clientData, loginData}=this.state; 

     return (<div> 
      {this.setProps(client,clientData)} 
      {this.setProps(login,loginData)} 
     </div>); 
    } 
} 

export default App; 

当页面上更多的则每条路线的一个组成部分