🧐[问题]ProLayout组件，不使用UMI，使用ReactRouter，配置路由、导航菜单和面包屑的最佳方案是?

[siminture]

🧐 问题描述

ProLayout组件，不使用UMI，使用ReactRouter，配置路由、导航菜单和面包屑的最佳方案是什么？

测试了配置route属性，可以生成菜单，但是没有生成连接

import { ProLayoutProps } from '@ant-design/pro-layout';
import { ChromeFilled, CrownFilled, SmileFilled, TabletFilled } from '@ant-design/icons';
import React from 'react';

const Home = React.lazy(() => import('pages/Home'));
const Sample = React.lazy(() => import('pages/Sample'));

const props: ProLayoutProps = {
  fixSiderbar: true,
  layout: "side",
  splitMenus: false,
  contentWidth: 'Fluid',
  siderMenuType: 'group',
  fixedHeader: true,
  route: {
    path: '/',
    routes: [
      {
        path: '/welcome',
        name: '欢迎',
        icon: <SmileFilled />,

      },
      {
        path: '/admin',
        name: '管理页',
        icon: <CrownFilled />,
        access: 'canAdmin',
        routes: [
          {
            path: '/admin/sub-page1',
            name: '一级页面',
            icon: 'https://gw.alipayobjects.com/zos/antfincdn/upvrAjAPQX/Logo_Tech%252520UI.svg',
          },
          {
            path: '/admin/sub-page2',
            name: '二级页面',
            icon: <CrownFilled />,
          },
          {
            path: '/admin/sub-page3',
            name: '三级页面',
            icon: <CrownFilled />,
          },
        ],
      },
      {
        name: '列表页',
        icon: <TabletFilled />,
        path: '/list',
        routes: [
          {
            path: '/list/sub-page',
            name: '列表页面',
            icon: <CrownFilled />,
            routes: [
              {
                path: 'sub-sub-page1',
                name: '一一级列表页面',
                icon: <CrownFilled />,
                component: <Sample />
              },
              {
                path: 'sub-sub-page2',
                name: '一二级列表页面',
                icon: <CrownFilled />,
              },
              {
                path: 'sub-sub-page3',
                name: '一三级列表页面',
                icon: <CrownFilled />,
              },
            ],
          },
          {
            path: '/list/sub-page2',
            name: '二级列表页面',
            icon: <CrownFilled />,
          },
          {
            path: '/list/sub-page3',
            name: '三级列表页面',
            icon: <CrownFilled />,
          },
        ],
      },
      {
        path: 'https://ant.design',
        name: 'Ant Design 官网外链',
        icon: <ChromeFilled />,
      },
    ],
  },
};

export default props;

[oswayne]

同问

[zhongjiaguo001]

需要使用react-router先去生成路由才可以

[oswayne]

需要使用react-router先去生成路由才可以

能展开说说吗？

[hyzx86]

同问

[hyzx86]

我把ProLayout 放在路由里面 不管用，内容是白的

<app.tsx>
<routerRoot>
...不需要授权的路由
<MyProLayout>
  需要授权的路由
</MyProLayout>
</routerRoot>
</app.tsx>

。。。

<ProLayout>
{children}
</ProLauout>

[hyzx86]

路由放里面声明吧 ，，Layout 还要Location 放外面声明吧 又渲染不出内容。。 弄好几天了。。囧

[oswayne]

路由放里面声明吧 ，，Layout 还要Location 放外面声明吧 又渲染不出内容。。 弄好几天了。。囧

老哥，有解决方案了吗？

[BATTLEHAWK00]

+1

[hyzx86]

我这边倒是弄出了个简单的，但是遇到 多层地址还是会出问题。。不知道是因为我这边用 比如 a/b 这种没问题 但是 a/b/c 这种路由就会整页面刷新，而且还报错了。。。 搞不明白啥问题

[hyzx86]

切换菜单时

[hyzx86]

搞定了 ，内容路由要加

<React.Suspense fallback={<Spinner overlay />}>
      <Switch>
        <Redirect exact path={'/'} to={'/dashboard'} />
        <Route exact path={'/dashboard'} component={svgIndex} />