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, когда я нажимаю эту кнопку, я хочу добавить еще один картофель в корзину. Тем не менее, с этой установкой я получаю ошибку:

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

Как я могу получить его так, чтобы обновить состояние в RouterHub передает, что на маршруты, или это не возможно, и я делаю это все неправильно ?

Спасибо за любую помощь

Answer 1

Поскольку у вас уже есть основной компонент для удержания вашего состояния, вы должны вставить, что в уровне маршрута компонентного то верхним, как это:

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

Тогда в компоненте RouterHub , передавать их клонировать каждые ребенок компоненту с реквизитом, что-то вроде этого:

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

врезаться в таком роде проблемы заставят вас думать о нас некоторые библиотеки управления государством, такие как Redux/Flux.