zoukankan      html  css  js  c++  java
  • reactrouter 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,
        },
    ];

    这样就好了。

    不积跬步无以至千里
  • 相关阅读:
    报错:maven 程序包org.junit不存在
    Sublime Text 3
    Win10使用技巧
    CookieHelper
    log4net
    文件导出 Aspose
    C# 数字证书加载 X509Certificate2
    前后端文件上传
    WebApi 后端文件传输至远程服务器
    aspnet_regiis.exe用法(备忘非自创)
  • 原文地址:https://www.cnblogs.com/lyt0207/p/15618760.html
Copyright © 2011-2022 走看看