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

既然你已经有一个主要的组件来保存你的状态，你应该将它插入到顶级 Route 组件中，如下所示：

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

然后在你的 RouterHub 组件中，通过 props 传递那些克隆每个子组件，如下所示：

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

碰到这类问题会让你想到使用一些状态管理库，比如 Redux/Flux。