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日

悬赏问题

  • ¥100 如何把 16bit Bayer 图像数据转换为 TIFF RGB
  • ¥15 进行基于用户的协同过滤推荐,使用准确率和召回率评价推荐模型的效果
  • ¥15 关于#cesium#的问题:cesium 根据经纬度、高度、方位角、俯仰角和距离求另一点高度
  • ¥15 word脚注设置不起空格符号
  • ¥15 为什么apriori的运行时间会比fp growth的运行时间短呢
  • ¥15 求解密json或者美化
  • ¥15 帮我解决一下膳食平衡的线性规划模型的数据实例
  • ¥40 万年历缺少农历,需要和阳历同时显示
  • ¥250 雷电模拟器内存穿透、寻基址和特征码的教学
  • ¥15 关于Java的学习问题