tuyến con lồng nhau trong một con đường con

Question

EDIT

câu hỏi ban đầu của tôi bao gồm các tuyến đường với các điểm phân chia, nhưng tôi đã giảm nó vào trường hợp sử dụng đơn giản nhất của các tuyến đường con chỉ làm tổ dưới mỗi khác.

Để tham khảo Tôi đang sử dụng the popular react-redux-starter-kit và tôi đang cố gắng để thêm một thành phần wrapper đơn giản để các tuyến đường của tôi như vậy:

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

nhưng tôi nhận được lỗi sau và các tuyến đường con tôi không được trả lại :

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 

Vì vậy, về cơ bản nếu tôi tổ chức tuyến trẻ em trên tuyến đường trẻ em, tôi nhận được đơn khiếu nại về trẻ bị mất tích.

Dưới đây là toàn bộ thiết lập:

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 < --- không hoàn trả

const TransitionWrapper = (props) => (

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

    </div> 
) 

export default TransitionWrapper 

NestedChild.js < --- không hoàn trả

Answer 1

bạn đã cố gắng chỉ cần loại bỏ isRequired từ children prop của CoreLayout?

Nếu bạn đang tải các thành phần con của mình theo kiểu động, sẽ có khoảng thời gian khi hiển thị CoreLayout trước khi bạn có các thành phần con để đưa vào.