javascript - Redux 和 react 路由器 : Provider bug

Question

我正在使用 ReactJS 启动新应用。所有网络环境对我来说都是全新的。

无论如何，我使用 react-router 创建了一个简单的应用程序。完美运行:)。

我尝试添加 Redux，但……失败了。我不知道如何使用 React-redux 和 react-router。

这是我的输入 JS:index.js

class App extends React.Component{
  render(){
    return(
      <div>
        {routes}
      </div>
    );
  }
}

ReactDOM.render(
  <Provider store={store}>  <App /> </Provider>,
  document.getElementById('app')
);

这是我的 route.js

export default (
  <Router history={hashHistory}>
    <Route path='/' component={Main}>
      <IndexRoute component={Home} />
      <Route path='playerOne' header="PlayerOne" component={PromptContainer} />
      <Route path='playerTwo/:playerOne' header="PlayerTwo" component={PromptContainer} />
      <Route path='battle' component={ConfirmBattleContainer} />
      <Route path='results' component={ResultsContainer} />
      <Route path='maninthemiddle' component={ManinthemiddleContainer} />
      <Route path='button' component={ButtonContainer} />
    </Route>
  </Router>
);

和我的 reducer.js

import reducer from './reducer.js'
import { createStore } from 'redux';


const store = createStore(reducer);

export default store;

这是我的错误。

Uncaught Error: React.Children.only expected to receive a single React element > child

还有我的警告:

Warning: Failed prop type: Invalid prop children of type array supplied > > to Provider, expected a single ReactElement.

我知道 Provider 必须位于应用程序的“顶部”，但这正是我所做的。我迷路了:(

谢谢你们的帮助。

Answer 1

您需要删除 周围的空格。这:

ReactDOM.render(
  <Provider store={store}>  <App /> </Provider>,
  document.getElementById('app')
);

应该是:

ReactDOM.render(
  <Provider store={store}><App /></Provider>,
  document.getElementById('app')
);

其中的空格被视为文本节点，即额外的子节点。