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; 

當頁面上更多的則每條路線的一個組成部分