react-router v6 嵌套路由中子路由页面不渲染问题

 

BasicLayout是我的父组件，menu.js 配置了所有的子组件路由

 

如下

父组件路由配置

 1 export default [
 2     {
 3         path: '/nomatch/:type',
 4         component: NoMatch,
 5     },
 6     {
 7         path: '',
 8         component: BasicLayout,
 9         render: () => <Navigate to="/" />,
10     },
11     {
12         path: '/',
13         component: BasicLayout,
14         // exact: false,
15     },
16 ];

子组件路由配置

 1 export default [
 2     {
 3         path: '/home',
 4         meta: {
 5             title: '首页',
 6             icon: <SettingOutlined />,
 7         },
 8         name: 'Home',
 9         component: React.lazy(() => import('../pages/Home')),
10         // component: Home
11     },
12     {
13         path: '/about',
14         meta: {
15             title: '关于',
16             icon: <SettingOutlined />,
17         },
18         name: 'Home',
19         redirect: '/me',
20         routes:[
21             {
22                 path: '/me',
23                 meta: {
24                     title: '个人信息',
25                     icon: <SettingOutlined />,
26                 },
27                 name: 'Me',
28                 component: React.lazy(() => import('../pages/About')),
29             }
30         ],
31     },
32 ];

父组件跳转配置

<Content style={{ margin: ' 16px' }}>
                        <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
                            <p>主页面</p>
                            {createRoutes(combineRoutePermissions(pageRoutes, authorityKeys), { authorityKeys })}
                            <Link to='home'>home </Link>
                            <Link to='about/me'>关于</Link>
                        </div>
                    </Content>

 

 

 点击home会跳转空白

 

 查看warning信息

 

 您在“/”（在<Route path=“”>）下）呈现了子体<Routes>（或调用了`useRoutes（）`），但父路由路径没有尾随“*”。这意味着，如果导航得更深，父路由将不再匹配，因此子路由将永远不会渲染。

修改：给父组件路径添加 * 

export default [
    {
        path: '/nomatch/:type',
        component: NoMatch,
    },
    {
        path: '',
        component: BasicLayout,
        render: () => <Navigate to="/*" />,
    },
    {
        path: '/*',
        component: BasicLayout,
        // exact: false,
    },
];

这样就好了。

posted @ 2021-11-29 11:56  leahtao  阅读(3329)  评论(0)  编辑  收藏  举报