HOC components don't work on <Route render=HOC /> or <route component=HOC />?

[heldrida]

Version

4.0.0

Test Case

https://codepen.io/helderoliveira/pen/rmXdgd

Steps to reproduce

Pass a function that returns a component to component={} or render={}
You can also find it reported here ( https://stackoverflow.com/questions/44289973/react-router-4-nesting-routes-alternative-technique )

Expected Behavior

If not support to return an error message

Actual Behavior

Blank

Also tried,

import React from 'react'
import { Route } from 'react-router'
import { BrowserRouter } from 'react-router-dom'
import { Provider } from 'react-redux'
import App from '../app/containers/app'
import rootRoutes from './routes'

const Root = ({store, history}) => {
  return (
    <Provider store={store}>
      <BrowserRouter history={history}>
        <Route exact path='/' render={routeProps => <App {...Object.assign({}, routeProps, ...rootRoutes[0].routes)} />} />
      </BrowserRouter>
    </Provider>
  )
}

export default Root

[heldrida]

Forget it, I was doing it wrong. Solution for future readers:

import React from 'react'
import { Route } from 'react-router'
import { BrowserRouter } from 'react-router-dom'
import { Provider } from 'react-redux'
import App from '../app/containers/app'
import rootRoutes from './routes'

const Root = ({store, history}) => {
  return (
    <Provider store={store}>
      <BrowserRouter history={history}>
        <Route path='/' render={routeProps => <App {...Object.assign({}, routeProps, { routes: rootRoutes[0].routes })} />} />
      </BrowserRouter>
    </Provider>
  )
}

export default Root