リアクタ・ルーターは、特定のパラメータを子の代理人に渡します。

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を渡すことができるようにしたいです。

{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; 

任意の考えを？私は多くのGoogleの結果を見てきましたが、ほとんどの場合、反応と反応ルータの古いバージョンに戻っています。

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; 

で、それはまた、ページ上のルート