2016-11-17 84 views
1

我开始使用ReactJS的新应用程序。所有的网络环境对我来说都是相当新的。Redux&React-router:提供程序错误

无论如何,我使用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> 
); 

和OFC我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.

我知道,供应商必须对应用程序的“顶部”,但它正是我所做的。我迷路了:(

感谢您的帮助家伙

回答

3

您需要删除围绕<应用/ >空白此:。

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

应该是:

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

那里的空间被当作文本节点,即额外的孩子。

+0

@GreG格斯 - 你好!如果我的答案确实解决了你的错误/警告,你能否接受答案?谢谢! –

+0

谢谢你,伙计! – GreGGus

相关问题