Reactは、ルータのすべてのルートに動的な状態を渡します。

Question

私はReactルータのすべてのルート、特にショッピングカート（オブジェクトの配列）に動的な状態を渡そうとしています。

レイアウトにはルータとすべてのルートを含む親コンポーネントがあります。その中にカートを状態に保存してルートに渡したいので、基本的にすべてのルートにアクセスできます。私はいくつかの異なることを試してきたし、しばらくの間フォーラムでそれを調べてトラブルシューティングをしてきましたが、私はそれを得ることができません。これは私が持っている最新のセットアップです：

- Main.jsx

// This is the app entry point 
import React, { Component } from 'react'; 
import { render } from 'react-dom'; 
import RouterHub from './RouterHub.jsx'; 

render((
    <RouterHub /> 
), document.getElementById('root')); 

- RouterHub.jsx

import React, { Component } from 'react'; 
import { render } from 'react-dom'; 
import { Router, Route, hashHistory } from 'react-router' 
import Home from './Home.jsx'; 
import Dogs from './Pages/Other.jsx'; 

class RouterHub extends Component { 

    constructor(props) { 
     super(props); 
     this.addItem = this.addItem.bind(this); 
     this.state = { 
      cart: [] 
     }; 
    } 

    addItem(item) { 
     let newCart = this.state.cart.splice(); 
     newCart.push(item); 
     this.setState({cart: newCart}); 
    } 

    render() { 
     return(
      <Router history={hashHistory}> 
       <Route path="/" component={Home} cart={this.state.cart} addItem={this.addItem} /> 
       <Route path="/other" component={Other} cart={this.state.cart} addItem={this.addItem}/> 
      </Router> 
     ); 
    } 
} 

export default RouterHub; 

- Home.jsx

import React, { Component } from 'react'; 
import Slideshow from './Home/Slideshow.jsx'; 
import Navbar from './Constants/Navbar.jsx'; 
import Footer from './Constants/Footer.jsx'; 

class Home extends Component { 
    constructor(props) { 
     super(props); 
    } 

    render() { 
     return(
      <div> 
       <button onClick={() => this.props.route.addItem('potato')}>click me</button> 
       <Navbar /> 
       // All the JSX content, I've removed to make it succint 
       <Footer /> 
      </div> 
     ); 
    } 
} 

export default Home; 

本質的に私が欲しいのはHome.jsxにあります。そのボタンをクリックすると、別のジャガイモがカートに追加されます。 RouterHub状態を更新するルートに、またはその可能性はないことを通過するように、私はそれを得るにはどうすればよい

bundle.js:46451 Warning: [react-router] You cannot change <Router routes>; it will be ignored 

と私は、このすべての間違った方法をやっている：しかし、この設定で、私はエラーを取得します？あなたのRouterHubコンポーネントに続いて

render((
    <Router history={browserHistory}> 
    <Route path="/" component={RouterHub}> 
     <Route path="home" component={Home}/> 
    </Route> 
    </Router> 
), document.getElementById('root')) 

：あなたはすでにあなたの状態を保持するための主要な構成要素を持っているので、任意の助け

Answer 1

ため

おかげで、あなたはトップレベルのルート要素にこのような何かをすることをを挿入する必要がありこれらの子要素を小道具で複製すると、次のようになります。

{ 
    React.Children.map(this.props.children, (child) => { 
     return React.cloneElement(child, this.props) 
    }) 
} 

この種の問題にぶつかると、 Redux/Fluxなどのいくつかの状態管理ライブラリを作成します。