React.js中如何按用户类型配置多套路由与侧边导航并修复路由失效问题

核心错误定位 #

• 方法未实际调用：App组件渲染区传入的是{this.showLink}，仅将函数本体传入渲染树，没有执行函数获取返回的路由节点；Sidenav组件渲染区的{this.sideLink}存在完全相同的问题，导致侧边导航、路由区域根本没有实际内容渲染
• 导航链接与路由规则不匹配：
  • 教师（tcr）账号侧边栏配置了指向/searches的跳转链接，但App内教师对应分支的路由表没有定义该路径的映射规则
  • 学生（std）账号侧边栏配置了指向/students的跳转链接，但App内学生对应分支的路由表同样缺失该路径的映射规则，点击后无法匹配到对应组件
• 代码中return语句后的break为冗余逻辑，不影响运行但可清理减少无意义代码

修复后可运行代码 #

App组件实现 #

import { BrowserRouter, Switch, Route } from 'react-router-dom'

export default class App extends Component {
  state = {
    usertype: "std",
    container: null // 补上原代码中缺失的容器状态初始化
  }

  // 容器初始化逻辑可根据实际业务调整
  componentDidMount() {
    this.setState({
      container: { /* 你的页面容器配置 */ }
    })
  }

  renderRouteByUser() {
    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="/searches">
              <SearchPage container={this.state.container}/>
            </Route>
            <Route path="/payam">
              <MessageT container={this.state.container}/>
            </Route>
          </Switch>
        );
      case "std":
        return (
          <Switch>
            <Route path="/" exact>
              <MainPageD container={this.state.container}/>
            </Route>
            {/* 补全学生侧边栏对应的缺失路由 */}
            <Route path="/students">
              <Student container={this.state.container}/>
            </Route>
            <Route path="/payamha">
              <MessageS container={this.state.container}/>
            </Route>
          </Switch>
        )    
      default:
        return <div></div>
    }
  }

  render() {
    return (
      <div>
        <BrowserRouter>
          <Navbar/>
          <Sidenav usertype={this.state.usertype}/>
          {/* 方法加上调用括号，实际执行获取返回节点 */}
          {this.renderRouteByUser()}
        </BrowserRouter>
      </div>
    )
  }
}

Sidenav组件实现 #

import { Link } from 'react-router-dom'

export default class Sidenav extends Component {
  renderNavByUser() {
    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"> 首页
                </li>
              </Link>  
              <Link to="/searches" className="aside"> 
                <li className="liside"> 搜索
                </li>
              </Link> 
              <Link to="/payam" className="aside"> 
                <li className="liside"> 消息
                </li>
              </Link>   
            </ul>
          </div>
        );
      case "std":
        return(
          <div className="sidebar bg-dark fixed">
            <ul className="text-center ulside">
              <Link to="/" className="aside"> 
                <li className="liside">首页
                </li>
              </Link>   
              <Link to="/students" className="aside"> 
                <li className="liside"> 学生
                </li>
              </Link> 
              <Link to="/payamha" className="aside"> 
                <li className="liside"> 消息
                </li>
              </Link>   
            </ul>
          </div>
        )
      default:
        return <div></div>
    }
  }

  render() {
    return (
      <div dir="rtl">
        <div>
          <div>
            {/* 方法加上调用括号，实际执行获取返回导航节点 */}
            {this.renderNavByUser()}
          </div>
        </div>
      </div>
    );
  }
}

注意事项 #

• 确保项目已安装react-router-dom依赖，未安装可执行npm install react-router-dom完成依赖部署
• 不同用户类型的路由可抽离为独立配置数组，减少重复的Switch、Route结构代码
• 若后续新增导航链接，需同步在对应用户类型的路由表中添加匹配规则，避免出现点击无响应的问题

内容的提问来源于stack exchange，提问作者mr.pro