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>
)
}