2016-11-17 35 views
1

ReactJSを使用して新しいアプリを開始します。すべてのウェブのenvは私のために全く新しいものです。Redux&React-router:プロバイダのバグ

とにかく、私は反応ルータを使って簡単なアプリケーションを作成しました。完全に動作:)。

Reduxを追加しようとしましたが、失敗します。どのようにReact-reduxと反応ルータを使用するか分かりません。ここで

は私の入力はJSです:

class App extends React.Component{ 
    render(){ 
    return(
     <div> 
     {routes} 
     </div> 
    ); 
    } 
} 

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

index.jsここに私の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 OFC

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

関連する問題