javascript - React 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

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