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

还有我的 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 必须在应用程序的 "top" 上，但这正是我所做的。我迷路了:(

感谢你们的帮助。

Answer 1

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

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

应该是：

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

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

Redux 和 React-router：提供程序错误

Redux & React-router : Provider bug

javascript

reactjs

react-router

redux

react-redux