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

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

我知道，供應商必須對應用程序的「頂部」，但它正是我所做的。我迷路了:(

感謝您的幫助傢伙

Answer 1

您需要刪除圍繞<應用/ >空白此：。

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

應該是：

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

那裏的空間被當作文本節點，即額外的孩子。