react中的v6版本的路由使用

react中的v6版本的路由使用

/**
 *
 *    V6 版本的路由区别
 *        更趋近于vue的路由
          
          路由展示区             <Outlet></Outlet>  // 在 react-router-dom中引入
 *
 *         路由跳转传参  hooks   import { useNavigate } from "react-router.dom"
 *                             const navigate = useNavigate()
 *                             navigate(`/test?id=${id}`)
 *                     接参数   import { useSearchParams } from "react-router-dom"
 *                             const [params, setParams] = useSearchParams()
 *                             params.get('id')
 *                             setParams({id: 1200})  // 设置页面跳转传过来的值
 *
*          路由拦截做权限控制     详见 detail组件和 child2 组件
 *
 *         withRouter          只有在类组件中使用  函数式组件用 useNavigate()  和  useSearchParams()
 *
 *         路由懒加载            React.lazy   React.Suspense  详细见下面的配置
 */



import React from 'react';

import { Routes, Route, Navigate, useRoutes } from 'react-router-dom'

export default function Router() {

    const routes = useRoutes([
        {
            path: '/child1',
            element: lazyLoad('Child1'),  // 懒加载，方法自己封装的， 见下面
            children: [
                {
                    path: 'nowplaying',
                    element: lazyLoad('Child1/Nowplaying')
                },
                {
                    path: 'commingsoon',
                    element: lazyLoad('Child1/Commingsoon')
                },

                {
                    path: 'detail',
                    element: <AutoComponent>{ lazyLoad('Child1/Detail') }</AutoComponent>  // 路由鉴权
                },

                {
                    path: '',
                    element: <Navigate to="/child1/nowplaying"></Navigate>   // 路由重定向
                }
            ]
        },
        {
            path: '/child2',
            element: <AutoComponent>
                        { lazyLoad('Child2') }
                    </AutoComponent>
        },
        {
            path: '/child3',
            element: lazyLoad('Child3')
        },

        {
            path: '/login',
            element: lazyLoad('Login')
        },

        {
            path: '/',
            element: <Navigate to="/child1"></Navigate>   // 路由重定向
        },

        {
            path: '*',
            element: lazyLoad('NotFount')  // 404页面
        }
    ])

    return(
        routes
        // <div>
        //     <Routes>
        //         {/*<Route index element={<Child1></Child1>}></Route>*/}
        //         <Route path="/child1" element={lazyLoad("Child1.js")}>
        //             {/*<Route index element={<Nowplaying></Nowplaying>}></Route>*/}
        //             <Route path="nowplaying" element={ lazyLoad('Child1/Nowplaying') }></Route>
        //             <Route path="commingsoon" element={ lazyLoad("Child1/Commingsoon") }></Route>
        //
        //             <Route path="detail" element={<AutoComponent>
        //                 { lazyLoad('Child1/Detail') }
        //             </AutoComponent>}></Route>
        //
        //             <Route path="" element={<Navigate to="/child1/nowplaying"></Navigate>}></Route> {/*子路由重定向到第一个*/}
        //         </Route>
        //         <Route path="/child2" element={<AutoComponent>
        //             {lazyLoad('Child2')}
        //         </AutoComponent>}></Route>
        //         <Route path="/child3" element={ lazyLoad('Child3') }></Route>
        //
        //         <Route path="/login" element={ lazyLoad('Login') }></Route>
        //
        //         <Route path="/"  element={<Navigate to="/child1"></Navigate>}></Route>    {/* 外层路由重定向 */ }
        //         <Route path="*" element={ lazyLoad('NotFount') }></Route>
        //     </Routes>
        // </div>
    )
}

/**
 *
      此处是路由拦截的关键方法
 */
function AutoComponent(props) {
    const children = props.children
    const isLogin = localStorage.getItem("token")
    return isLogin ? children : <Navigate to="/login" />
}

/**
 *    路由懒加载的封装
 */
function lazyLoad(path) {
    let Comp = React.lazy(() => import(`../view/${path}`))

    return(
        <React.Suspense fallback={<>加载中....</>}>
            <Comp></Comp>
        </React.Suspense>
    )
}