react-router-dom v6 骚气

v5 和 v6 确实有点区别

// 这属于包含路由嵌套（一层嵌套） => 走入<HomeLayout/>组件，这个其实是个导航条
// 路由嵌套,需要配合<Outlet/>组件使用
// 嵌套路由必须在父级追加 `Outlet` 组件，作为子级组件的占位符
const routes = useRoutes([
    {
        path: "/",
        element: <HomeLayout/>,
        children: [
            {path: "/" , element: <Tesla/>},
            {path: "/tesla" , element: <Tesla/>},
            {path: "/find" , element: <Find/>}
        ]
    }
])

// <HomeLayout/>组件 
import { Outlet, Link } from "react-router-dom"
const HomeLayout = (props) => {
    return (
        <React.Fragment>
            <Outlet />   // 必须占位
            <div className="tab">
                <Link to="/find"><div className="tabItem"><span>发现</span></div></Link>
                …… …… …… ……
            </div>
        </React.Fragment>
    )
}

<Outlet /> 组件用来承接路由 `children` 所对应的 element内容

// 路由嵌套路由（两层路由嵌套）
// 传参 "modal/:id"
const routes = useRoutes([
    {
        path: "/",
        element: <HomeLayout/>,
        children: [
            {path: "/" , index:true, element: <Tesla/>},
            {
                path: "tesla" , 
                element: <Outlet/>,
                children: [
                    {index: true,  element: <Tesla/>},
                    {path: "modal/:id",  element: <Modal/>}
                ]
            }
        ]
    }
])

// 这就是一般路由（不属于嵌套路由），正常匹配就好
const routes = useRoutes([
    {
        path: "/",
        children: [
            {path: "/" , element: <Tesla/>},
            {path: "/tesla" , element: <Tesla/>},
            {path: "/find" , element: <Find/>}
        ]
    }
])

// 泥马这就是咱们的一般路由了，没毛病，稳如15岁的老狗
const routes = useRoutes([
    {path: "/" , element: <Tesla/>},
    {path: "/tesla" , element: <Tesla/>},
    {path: "/find" , element: <Find/>}
])

参考文献：blog.csdn.net/weixin_4405…

参考文献：www.ekotlin.com/article/300…

结语

前端react QQ群：788023830 ---- React/Redux - 地下老英雄

前端交流 QQ群：249620372 ---- FRONT-END-JS前端

（我们的宗旨是，为了加班，为了秃顶……，仰望大佬），希望小伙伴们加群一起学习