Question

我正在为React 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

访问内部组件中的React路由以分配直接路由

0 个答案: