Как создать вложенные компоновки маршрутизации макета в ответном маршрутизаторе?

Question

Я пытаюсь вложить маршруты таким образом, чтобы предварительно установить макет для всех дочерних маршрутов указанных маршрутов.

, например:

<Provider store={store}> 
    <Router history={history}> 
     <Router path="/" component={Init}> 
      <Router component={LayoutThreeCol}> 
       <IndexRoute component={PageContainer}/> 
      </Router> 
      <Router component={LayoutTwoCol}> 
       <Route path="/example" component={Example}/> 
       <Route path="/another" component={Another}/> 
      </Router> 
     </Router> 
    </Router> 
</Provider> 

В этом случае, LayoutThreeCol и ListTwoCol являются два компонента макета, инкапсулирующие ребенка контейнер и презентационные компоненты. Мне нужно иметь возможность визуализировать, а также передавать реквизиты до дочерних элементов, но я получаю ошибки. Однако, думаю, проблема связана с тем, что следующая строка вложена в два дочерних элемента и родителя соответственно.

`{React.cloneElement({...this.props}.children, {...this.props})}` 

So here is the code I am using an init file to instantiate the `mapStateToProps` 

import { bindActionCreators } from 'redux' 
import { connect } from 'react-redux'; 
import * as actionCreators from './ActionCreators' 
import App from './App'; 

function mapStateToProps(state, ownProps){ 
    return{ 
     Items: state.feedItems, 
     universalNav: state.universalNav, 
     height: state.height, 
     width: state.width, 
     isMobile: state.isMobile, 
     isTablet: state.isTablet 
    }; 
} 

function mapDispatchToProps(dispatch){ 
    return bindActionCreators(actionCreators, dispatch); 
} 


const Init = connect(mapStateToProps, mapDispatchToProps)(App); 

export default Init; 

Вот файл приложение, которое я использую в качестве обертки

export default class App extends Component { 

render(){ 
      return(
       <div> 
        <NavContainer /> 
        {React.cloneElement({...this.props}.children, {...this.props})} 
       </div> 
      ); 
    } 
} 

Вот пример файла макета.

export default class LayoutThreeCol extends Component{ 
    render(){ 
     return(
      <div className="layout-3-col"> 
       <div className="layout-3-col-left"> 
        //stuff goes here 
       </div> 
       <div className="layout-3-col-center"> 
        {React.cloneElement({...this.props}.children, {...this.props})} 
       </div> 
       <div className="layout-3-col-right"> 
        //stuff goes here 
       </div> 
      </div> 
     ) 
    } 
} 

макет два цв экспорта класс по умолчанию LayoutTwoCol расширяет компонент { визуализации() { возврата ( // для краткости опускает ) }}

И контейнер страницы является тривиальный презентационный компонент. Как визуализировать несколько вложенных компонентов, как описано в приведенном выше примере? Thanks

Answer 1

Добро пожаловать в Stackoverflow!

В documentation я вижу только один корень <Router> Компонент. Кроме того, у вас нет пути для компонента LayoutTwo и LayoutThreeCol в маршрутизаторе.

Чтобы отобразить несколько вложенных компонентов, вам необходимо иметь вложенные компоненты <Route>. Таким образом, this.props.children будет дочерним компонентом в методе рендеринга родительского компонента.

Если вы хотите передать реквизит для дочерних маршрутов, просто добавьте параметр в маршрут:

<Route path="messages/:id" component={Message} /> В <Message> элемента, вы будете иметь: {} this.props.params.id

Я думаю, что ваш маршрутизатор должен выглядеть следующим образом:

<Provider store={store}> 
    <Router history={history}> 
     <Route path="/" component={Init}> 
      <Route path="layoutThree" component={LayoutThreeCol}> 
       <IndexRoute component={PageContainer}/> 
      </Route> 
      <Route path="layoutTwo" component={LayoutTwoCol}> 
       <Route path="example" component={Example}/> 
       <Route path="another" component={Another}/> 
      </Route> 
     </Route> 
    </Router> 
</Provider> 

/layoutThree: В LayoutThreeMethod метод отрисовки, this.props.children будет элементом <PageContainer> по умолчанию!

/layoutTwo/Exemple: В layoutTwoCol, this.props.children будет <Exemple/> элемент!