【React】解决在Router6中使用路由表中对嵌套路由进行重定向的问题

解决在Router6中使用路由表中对嵌套路由进行重定向的问题

---

---

解决在Router6中使用路由表中对嵌套路由进行重定向的问题

自己在试了很多的方法后，只有这一种方法实现了效果

我想实现的效果是：在登录后，进入到home组件下默认展示home的子路由组件mainshow

我在写下面代码的时候是这样想的：先让它匹配到/home展示Home组件，然后在匹配一次进行重定向到子级路由，展示子级路由，发现不行，原因是因为在路由表匹配到第一个后就不会向下匹配

后面我将其调换了一下顺序就可以了，当匹配/home将其重定向到/home/mianshow，然后它就会先去渲染Home组件，再渲染MainShow组件

export const router:Array<RouterType> = [
    {
        path:'/login',
        element:(
            <Suspense>
                <Login/>
            </Suspense>
        )
    },
    {
        path:'/home',
        element:<Navigate to='/home/mainshow'/>
    },
    {
        path:'/home',
        element:<Home/>,
        children:[
            {
                path:'mainshow',
                element:(
                    <Suspense>
                        <MainShow/>
                    </Suspense>
                )
            }
        ]
    },
    {
        path:'*',
        element:(
            <Suspense>
                <Navigate to={localStorage.getItem('token')?'/home':'/login'} />
            </Suspense>
        )
    },
] 

---

总结

以上就是今天要讲的内容，希望对大家有所帮助！！！