Rotas filhas de aninhamento dentro de outra rota secundária

9

EDITAR

Minha pergunta inicial incluía rotas com pontos de divisão, mas reduzi-a ao caso de uso mais simples de apenas aninhar rotas secundárias entre elas.

Para referência eu estou usando o o popular kit react-redux-starter e eu sou tentando adicionar um componente wrapper simples às minhas rotas da seguinte forma:

export const createRoutes = (store) => ({
      path: '/',
      component: CoreLayout,
      indexRoute: Home,
      childRoutes: [{
        component: TransitionWrapper,
        childRoutes: [
          CounterRoute(store)
          ]
      }]
    })

mas recebo o seguinte erro e minhas rotas filhas não estão sendo processadas:

Warning: Failed prop type: Required prop 'children' was not specified in 'CoreLayout'.
    in CoreLayout (created by RouterContext)
    in RouterContext (created by Router)
    in Router (created by AppContainer)
    in div (created by AppContainer)
    in Provider (created by AppContainer)
    in AppContainer

Então, basicamente, se eu aninhar rotas secundárias em uma rota infantil, recebo uma reclamação sobre crianças desaparecidas.

Aqui está a configuração completa:

main.js

const MOUNT_NODE = document.getElementById('root')

let render = () => {
  const routes = require('./routes/index').default(store)

  ReactDOM.render(
    <AppContainer
      store={store}
      history={history}
      routes={routes}
    />,
    MOUNT_NODE
  )
}

/routes/index.js

import CoreLayout from '../layouts/CoreLayout/CoreLayout'
import Home from './Home'
import NestedChild from './NestedChild'
import TransitionWrapper from './TransitionWrapper'

export const createRoutes = (store) => ({
  path: '/',
  component: CoreLayout,
  indexRoute: Home,
  childRoutes: [{
    component: TransitionWrapper,
    childRoutes: [
      NestedChild
      ]
  }]
})

AppContainer.js

class AppContainer extends Component {
  static propTypes = {
    history: PropTypes.object.isRequired,
    routes: PropTypes.object.isRequired,
    store: PropTypes.object.isRequired
  }

  render () {
    const { history, routes, store } = this.props

    return (
      <Provider store={store}>
        <div style={{ height: '100%' }}>
          <Router history={history} children={routes} />
        </div>
      </Provider>
    )
  }
}

export default AppContainer

CoreLayout.js

import React from 'react'
import Header from '../../components/Header'
import classes from './CoreLayout.scss'
import '../../styles/core.scss'

export const CoreLayout = ({ children }) => (
  <div className='container text-center'>
    <Header />
    <div className={classes.mainContainer}>
      {children}
    </div>
  </div>
)

CoreLayout.propTypes = {
  children: React.PropTypes.element.isRequired
}

export default CoreLayout

TransitionWrappper.js < --- NÃO É RENDER

const TransitionWrapper = (props) => (

  <div className="im-not-working">
    {this.props.children}

  </div>
)

export default TransitionWrapper

NestedChild.js < --- NÃO É RENDER

    
por S. Schenk 09.08.2016 в 23:59
fonte

1 resposta

2

Você já tentou remover isRequired do children prop de CoreLayout ?

Se você estiver carregando seus componentes filhos dinamicamente, haverá um período de tempo em que o CoreLayout é renderizado antes de você ter componentes filhos para colocar nele.

    
por Brandon 10.08.2016 / 16:42
fonte