react redux路由器显示空白页答案

【问题标题】：react redux router display blank pagereact redux路由器显示空白页
【发布时间】：2016-01-27 10:26:34
【问题描述】：

我有 index.js 之类的：

render(
    <Root store={store} />,
  document.getElementById('root')
)

和Root.js 喜欢：

   class Root extends Component {
  render() {
    const { store } = this.props
    return (
      <Provider store={store}>
          <ReduxRouter />
      </Provider>
    )
  }
}

Root.propTypes = {
  store: PropTypes.object.isRequired
}

export default Root

还有我的routes.js 喜欢：

export default (
  <Route path="/" component={App}>
  </Route>
)

还有我的App.js 喜欢：

class App extends Component {
  render() {
    <div>
      <p>Some cool header</p>
    </div>
  }
}
export default App

但是当我通过localhost:3000 访问我的网站时，它只会显示空白页。我希望它会显示<p>Some cool header</p>

它没有给出任何错误..这里有什么问题..

【问题讨论】：

你在做服务器端渲染吗？

标签： javascript reactjs react-router redux

【解决方案1】：

您没有在Root 组件渲染函数中将任何路由传递给ReduxRouter 组件。这就是为什么 App 没有被渲染并且您看到一个空白页面的原因！

将Root.js 更新为：

import routes from './routes'

class Root extends Component {
  render() {
    const { store } = this.props
    return (
      <Provider store={store}>
          <ReduxRouter>
              {routes}
          </ReduxRouter>
      </Provider>
    )
  }
}

Root.propTypes = {
  store: PropTypes.object.isRequired
}

export default Root

然后您应该会在浏览器中看到所需的输出。

【讨论】：