javascript - Redux & React-router : Provider bug -

i'm starting new app using reactjs. web env quite new me.

anyway, created simple app, using react-router. works :).

i tried add redux, , ... fail. have no idea how use react-redux , react-router.

here's input js : index.js

class app extends react.component{   render(){     return(       <div>         {routes}       </div>     );   } }  reactdom.render(   <provider store={store}>  <app /> </provider>,   document.getelementbyid('app') ); 

here's 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 './reducer.js' import { createstore } 'redux';   const store = createstore(reducer);  export default store; 

and error.

uncaught error: react.children.only expected receive single react element > child

and warning :

warning: failed prop type: invalid prop children of type array supplied > > provider, expected single reactelement.

i know provider have on "top" of app, it's did. i'm lost :(

thanks helps guys.

you need remove whitespace around <app />. this:

reactdom.render(   <provider store={store}>  <app /> </provider>,   document.getelementbyid('app') ); 

should be:

reactdom.render(   <provider store={store}><app /></provider>,   document.getelementbyid('app') ); 

the spaces in there being treated text nodes, i.e. additional children.