1. 怎么固定左边的导航栏

精华 :
npm地址 : ant-design/pro-layout
github地址 api文档
注意点 : 设置了fixedHeader = {true} fixSiderbar = {true} 没有作用,原因可能是{...props} {...settings} 内定义的属性覆盖了,所以写在{...props} {...settings} 只有就可以.

      {...props}
      {...settings}
      // 之所以写在下面是为了防止{...settings}里面的属性又覆盖了下面 fixedHeader fixSiderbar
      fixedHeader = {true}
      fixSiderbar = {true}

分析/解决问题/授人以鱼不如授人以渔

第一步首先定位到那一块是左侧导航栏的代码?

定位到 : zhushang_b/src/layouts/BasicLayout.tsx
具体定位到的代码

<ProLayout
      logo={imglogo}
      menuHeaderRender={(logoDom, titleDom) => (
        <Link to="/">
          {logoDom}
          {titleDom}
        </Link>
      )}
      onCollapse={handleMenuCollapse}
      menuItemRender={(menuItemProps, defaultDom) => {
        if (
          menuItemProps.isUrl ||
          menuItemProps.children ||
          !menuItemProps.path
        ) {
          return defaultDom;
        }
        return <Link to={menuItemProps.path}>{defaultDom}</Link>;
      }}
      breadcrumbRender={(routers = []) => [
        {
          path: "/",
          breadcrumbName: formatMessage({
            id: "menu.home",
            defaultMessage: "Home"
          })
        },
        ...routers
      ]}
      itemRender={(route, params, routes, paths) => {
        const first = routes.indexOf(route) === 0;
        return first ? (
          <Link to={paths.join("/")}>{route.breadcrumbName}</Link>
        ) : (
          <span>{route.breadcrumbName}</span>
        );
      }}
      footerRender={footerRender}
      menuDataRender={menuDataRender}
      formatMessage={formatMessage}
      rightContentRender={() => <RightContent />}
     
      {...props}
      {...settings}
      // 之所以写在下面是为了防止{...settings}里面的属性又覆盖了下面 fixedHeader fixSiderbar
      fixedHeader = {true}
      fixSiderbar = {true}
    >
      <Authorized authority={authorized!.authority} noMatch={noMatch}>
        {children}
      </Authorized>
    </ProLayout>

第二步分析代码,切记不要不去思考直接改. 因为既然框架给你了,很大可能会有相应的设计,毕竟这个算刚需吧!
然后我分析到这个菜单栏可以定义属性,但是这些属性肯定是人家自带的. 所以我们要去找它的api! 看ProLayout从哪里导入进来的如下

import ProLayout, {
  MenuDataItem,
  BasicLayoutProps as ProLayoutProps,
  Settings,
  DefaultFooter
} from "@ant-design/pro-layout";

继续分析,发现ProLayout是来自 ant-design/pro-layout, 那么接下来就找开源的ant-design/pro-layout文档. google搜索 ant-design/pro-layout

于是找到了ant-design/pro-layout
发现了新大陆API!!!

ant-design/pro-layout的api

哇,都是英文阿,我在想这个肯定是阿里维护的阿,怎能没中文api!!于是到github地址去看看

github地址

问题解决 >> api文档

2.二级导航

            // {
            //   path: "/zhangbin/demo",
            //   name: "zhangbin",
            //   icon: "crown",
            //   routes: [
            //     {
            //       path: "/zhangbin/demo",
            //       name: "zhangbin",
            //       component: "./zhangbin/demo"
            //     },
            //     {
            //       path: "/zhangbin/demo",
            //       name: "zhangbin",
            //       component: "./zhangbin/demo"
            //     }
            //   ]
            // },

整个例子

routes: [
        {
          path: '/',
          component: '../layouts/BasicLayout',
          authority: ['admin', 'user'],
          routes: [
            {
              path: '/',
              redirect: '/user/login',
            }, 
            {
              path: '/task-center/index',
              name: 'task-center',
              icon: 'unordered-list',
              component: './task-center/index',
            },
            // 不要删除,以后做二级联动直接是个例子 -faith
            // {
            //   path: "/zhangbin/demo",
            //   name: "zhangbin",
            //   icon: "crown",
            //   routes: [
            //     {
            //       path: "/zhangbin/demo",
            //       name: "zhangbin",
            //       component: "./zhangbin/demo"
            //     },
            //     {
            //       path: "/zhangbin/demo",
            //       name: "zhangbin",
            //       component: "./zhangbin/demo"
            //     }
            //   ]
            // },
            {
              path: '/taskDetails/taskDetails',
              component: './taskDetails/taskDetails',
            },
            {
              path: '/settlement-center/index',
              name: 'settlement-center',
              icon: 'account-book',
              component: './settlement-center/index',
            },
            {
              path: '/personnel-management/index',
              name: 'personnel-management',
              icon: 'team',
              component: './personnel-management/index',
            },
            {
              path: '/userRouter/userRouter',
              name: 'user-center',
              icon: 'user',
              component: './userRouter/userRouter', //路由守卫,用户注册了就跳转到信息页面, 否则跳转到注册页面
              // Routes: ['./routes/PriviteRoute.js'],
            },
            {
              path: '/userInfo/userInfo',
              component: './userInfo/userInfo',
            },
            {
              path: '/user-center/index',
              component: './user-center/index',
            },
            {
              path: '/createTask/createTask',
              component: './createTask/createTask',
            },
            {
              path: '/createTaskSuccess/createTaskSuccess',
              component: './createTaskSuccess/createTaskSuccess',
            },
            {
              path: '/settlement-center/settleList/index',
              component: './settlement-center/settleList/index',
            },
            {
              path: '/settlement-center/settleDetail/index',
              component: './settlement-center/settleDetail/index',
            },
            {
              component: './404',
            },
          ],
        },
        {
          component: './404',
        },
      ],