react-router v6 嵌套路由中子路由頁面不渲染問題

 

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

 

如下

父組件路由配置

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

子組件路由配置

export default [
    {
        path: '/home',
        meta: {
            title: '首頁',
            icon: <SettingOutlined />,
        },
        name: 'Home',
        component: React.lazy(() => import('../pages/Home')),
        // component: Home
    },
    {
        path: '/about',
        meta: {
            title: '關於',
            icon: <SettingOutlined />,
        },
        name: 'Home',
        redirect: '/me',
        routes:[
            {
                path: '/me',
                meta: {
                    title: '個人信息',
                    icon: <SettingOutlined />,
                },
                name: 'Me',
                component: React.lazy(() => import('../pages/About')),
            }
        ],
    },
];

父組件跳轉配置

<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,
    },
];

這樣就好了。