Salted_fishes 2022-01-11 12:46 采纳率: 100%
浏览 58
已结题

react-router v4 遍历router后页面空白

我写的静态路由可以正常匹配,页面也会正常显示,但遍历之后点击菜单,路由会变,但页面是空白

这是写的静态路由 可以正常匹配
<Switch>
  <Route path="/index" component={User}/>
  <Route path="/admin" >
    <Switch>
      <Route path="/admin/log" component={Admin}/>
      <Route path="/admin/census" component={Census}/>
      <Route path="/admin/auth" component={SystemAuth}/>

    </Switch>
  </Route>
</Switch>

----------------------------------------------------------------------------------------------

下面的遍历方法 路由会变,页面空白
const adminRouters = [
    {
      path: '/index',
      component: User,
      title: '用户',
      icon: 'user'
    }, 
    {
      path: '/admin',
      title: '系统',
      icon: 'setting',
      childrens:[
        {
          path: '/admin/log',
          component: Log,
          title: '日志',
        }, 
        {
          path: '/admin/num',
          component: Num,
          title: '统计',
        }
      ]
    } 
]

generateRouter = (adminRouters) => {
    return (
      adminRouters.map(r => {
        if (r.childrens) {
          return (
            <Switch>
              <Route key={r.path} path={r.path} render={routeProps => {
                return (<r.component {...this.props} >
                  {this.generateRouter(r.childrens)}
                </r.component>);
              }}>
              </Route>
            </Switch>
          )
        } else {
          return (
            <Route
              key={r.path}
              path={r.path}
              exact
              render={routeProps => {
                return (<r.component {...routeProps} />);
              }}
            />
          )
        }

      })
    )
  }

render(){
    <Switch>
     {this.generateRouter(adminRouters)} //这是调用方法
     </Switch>
}


  • 写回答

3条回答 默认 最新

  • 崽崽的谷雨 2022-01-11 13:35
    关注

    你加个 默认路由试试

    {
          path: '/',
          component: User,
          title: '用户',
          icon: 'user'
        }, 
    
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 1月31日
  • 已采纳回答 1月31日
  • 创建了问题 1月11日

悬赏问题

  • ¥30 51单片机C语言数码管驱动单片机为AT89C52
  • ¥100 只改动本课件的 cal_portfolio_weight_series(decision_date), 跑完本课件。设计一个信息比率尽量高的策略。
  • ¥20 如何在visual studio 2022中添加ImageMagick库
  • ¥50 如何实现uniapp编译的微信小程序做可回溯视频
  • ¥15 求Houdini使用行家,付费。价格面议。
  • ¥15 前端高拍仪调用问题报错
  • ¥15 想用octave解决这个数学问题
  • ¥15 Centos新建的临时ip无法上网,如何解决?
  • ¥15 海康威视如何实现客户端软件对设备语音请求的处理。
  • ¥15 支付宝h5参数如何实现跳转