反应 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

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

反应 redux 路由器显示空白页

react redux router display blank page

javascript

reactjs

react-router

redux