反应redux路由器显示空白页

Question

我有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>

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

Answer 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

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