Redux & React-router：提供者错误

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

and ofc 我的 reducer.js

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


const store = createStore(reducer);

export default store;

这是我的错误。

未捕获的错误：React.Children.only 期望接收单个 React 元素 > 子

还有我的警告：

警告：失败的道具类型：提供了类型为 array 的无效道具 children > > 到 Provider，需要一个 ReactElement。

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

感谢你们的帮助。

Answer 1

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

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

应该是：

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

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