Доступ к маршрутам реагирования во внутреннем компоненте для назначения прямых маршрутов - PullRequest
Новая
       25

Доступ к маршрутам реагирования во внутреннем компоненте для назначения прямых маршрутов

0 голосов
/ 07 ноября 2018

Я работаю над назначением прямых маршрутов для каждого подкомпонента в реагировать js. Ниже приведен код функции render моего app.js

render() {
 return (
  <div>
   <switch>
     <Route path='/dashboard*' render={this.renderDash} />
     <Route path='/manage*' render={this.renderManage} />
   </switch>
 </div>
 );
}

Здесь метод this.render просто возвращает определенный компонент. Вкладка manage содержит больше компонентов, прикрепленных внутри. Ниже приведен код компонента <manage>. 

 class Manage extends React.Component {
   setDisplay = (e) => {
     let display = e.target.id;
     let viewToRender;
     if(display === 'manage1') {
       viewToRender = this.renderManage1;
     } else {
       viewToRender = this.renderManage2;
     }

     this.setState ({
      viewToRender: viewToRender,
     });
   }

   render() {
     return (
       <div>
         <li onClick={this.setDisplay} id='manage1'>Manage 1</li>
         <li onClick={this.setDisplay} id='manage2'>Manage 2</li>
         <div>
           {this.state.viewToRender}
        </div>
      </div>
     );
   }
 }

Здесь this.render работает так же, как и в app.js. На данный момент я могу получить доступ только к dashboard и manage страницам, используя direct route как https://project/dashboard или https://project/manage, и мне нужно click ссылок на подстраницы для доступа к этим страницам.

Я ищу какую-то логику, которая позволяет мне получить прямой доступ к manage1 и manage2, используя URLs, например https://project/manage/manage1 или https://project/manage/manage2.

Примечание : это просто демо. В реальном сценарии вкладка «Управление» имеет почти 10 подкомпонентов, а все подкомпоненты имеют еще 2-3 дочерних компонента. Поэтому я не могу использовать простые if-else или switch в app.js

...