CODEWITHSUNDEEP
javascriptreactjsreact-routerredux
varad
varad

Reputation: 8029

react redux router display blank page

I have index.js like:

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

and Root.js like:

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

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

export default Root

and my routes.js like:

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

and my App.js like:

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

But when I access my web via localhost:3000 it just show the blank page.. I expect it to show <p>Some cool header</p>

It does not give any error.. What is the issue here..

Upvotes: 0

Views: 1633

Answers (1)

GordyD
GordyD

Reputation: 5103

You have not passed any routes to the ReduxRouter component inside of the Root component render function. This is why App is not being rendered and you see a blank page!

Update Root.js to something like:

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

You should then see the desired output in your browser.

Upvotes: 1

Related Questions