Question

我正在使用ReactJS开始新的应用程序。所有网络环境对我来说都很新鲜。

无论如何，我使用react-router创建了一个简单的App。完美地运作:)。

我尝试添加Redux，然后......失败了。我不知道如何使用React-redux AND 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;

这是我的错误。

未捕获错误：React.Children.only预计会收到一个React元素＆gt;子

和我的警告：

警告：道具类型失败：提供的children类型的道具array无效＆gt; ＆GT;到Provider，期望一个ReactElement。

我知道提供商必须在应用程序的“顶部”，但这正是我所做的。我输了:(

感谢您的帮助。

Answer 1

您需要删除＆lt; App /＆gt;周围的空白区域。这样：

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

应该是：

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

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

Redux＆amp; React-router：提供程序错误

1 个答案: