如何在 reactjs 中创建多个 Routes 组件答案

【问题标题】：how to create multiple Routes component in reactjs如何在 reactjs 中创建多个 Routes 组件
【发布时间】：2021-04-28 20:58:50
【问题描述】：

我想为不同的用户使用不同的仪表板和不同的链接和路由。我尝试在 reactjs 中编写更改路由的代码，但这不起作用！

我写这段代码是为了创建路由器浏览器：

export default class App extends Component {

  state={
    usertype:"std",
  }
  showLink(){
    switch(this.state.usertype){
      case "tcr":
      return(
        <Switch>
          <Route path="/" exact>
            <MainPage container={this.state.container}/>
          </Route>
          <Route path="/students">
            <Student container={this.state.container}/>
          </Route>
          <Route path="/payam">
            <MessageT container={this.state.container}/>
          </Route>
        </Switch>
      );
      break;
      case "std":
      return(
        <Switch>
          <Route path="/" exact>
            <MainPageD container={this.state.container}/>
          </Route>
          <Route path="/payamha">
            <MessageS container={this.state.container}/>
          </Route>
        </Switch>
      )    
      break;    
      default:
      return(
        <div></div>
      ) 
      break;   
    }
  }
  render() {
    return (
      <div>
        <BrowserRouter>
          <Navbar/>
          <Sidenav usertype={this.state.usertype}/>
          {this.showLink}
        </BrowserRouter>
      </div>
    )
  }
}

还有这个sidenav和Links的代码：

export default class Sidenav extends Component {

  sideLink(){
    switch(this.props.usertype){
      case "tcr":
      return (
        <div className="sidebar bg-dark fixed">
          <ul className="text-center ulside">
            <Link to="/" className="aside"> 
              <li className="liside">  home
              </li>
            </Link>  
            <Link to="/searches" className="aside"> 
              <li className="liside">  searches
              </li>
            </Link> 
            <Link to="/payam" className="aside"> 
              <li className="liside">   messages
              </li>
            </Link>   
          </ul>
        </div>
      );
      break;
      case "std":
      return(
        <div className="sidebar bg-dark fixed">
          <ul className="text-center ulside">
            <Link to="/" className="aside"> 
              <li className="liside">home
              </li>
            </Link>   
            <Link to="/students" className="aside"> 
              <li className="liside"> students
              </li>
            </Link> 
            <Link to="/payamha" className="aside"> 
              <li className="liside"> messages
              </li>
            </Link>   
          </ul>
        </div>
      )
      break;  
    }
  }
  render() {
    return (
      <div dir="rtl">
        <div>
          <div>
            {this.sideLink}
          </div>
        </div>
      </div>
    );
  }
}

我想为每个用户创建空间组件并将其用于 Sidenav。我该如何解决这个问题？？

请帮帮我

谢谢。

【问题讨论】：

“这不起作用”——请更具体。什么不工作？您希望看到但不想看到的行为是什么？

标签： javascript reactjs react-router react-router-dom

【解决方案1】：

只需为每个路由添加一个 userType 道具并创建一个 ProtectedRoute 组件

1 = 老师

2 = 学生

    <Switch>
      <Route path="/"  exact>
        <MainPage container={this.state.container}/>
      </Route>
     
      <ProtectedRoute path="/students" userType={1} layout={teacherSideNav} >
        <Student container={this.state.container}/>
      </ProtectedRoute>
      <ProtectedRoute path="/payam" userType={1} layout={teacherSideNav}  >
        <MessageT container={this.state.container}/>
      </ProtectedRoute>
  
      <Route path="/payamha" userType={2} layout={studentSideNav} >
        <MessageS container={this.state.container}/>
      </Route>
    </Switch>

然后在 ProtectedRoute 组件中应用逻辑

【讨论】：