// 如果当前url为/home
// V5
<Link to="page1"> -> <Link to="/page1">
// V6做法
<Link to="page1"> -> <Link to="/home/page1">
当前在 /home 我需要跳转到/home/page1，在V5中是存在路由歧义的，但是V6已经修复了
<Redirect/> 替换为 <Navigate/>
// v5
<Redirect to='/login'/>
// v6
<Navigate to='/login' />
<Switch/> 重命名为 <Routes/>
// v5
// Suspense 异步加载
import {Switch,Router,Route} from 'react-router-dom'
<Router>
<Switch>
<Route path='/login'>
<Suspense fallback={<Loading />}><Login /></Suspense>
</Route>
<Route path='/*' >
<Suspense fallback={<Loading />}><NotFound /></Suspense>
</Route>
</Switch>
</Router>
// v6
import {Routes,Router,Route} from 'react-router-dom'
<Router>
<Routes>
<Route path='/login' element={<Suspense fallback={<Loading />}><Login /></Suspense>}>
</Route>
<Route path='/*' element={<Suspense fallback={<Loading />}><NotFound /></Suspense>}>
</Route>
</Routes>
</Router>
V5中使用component或者render去渲染，或者被当做子组件渲染，但是在V6这些方法都已经element被淘汰
用useNavigate代替useHistory
// v5
let history = useHistory()
history.push('/login');
history.replace('/login');
let navigate = useNavigate();
navigate('/login');
navigate('/login', {replace: true});
依赖包大小从20kb减少到8kb,整体体积减少
新钩子useRoutes代替react-router-config
function Page() {
let pages = useRoutes([
{ path: '/login', element:<Login/> },
// 404找不到
{ path: '*', element: <NotFound /> }
return pages;
新标签：<Outlet/>
<Content style={{ height: '90vh' }}>
<Outlet></Outlet>
</Content>
<Outlet/>的出现帮我们节省了很多代码逻辑避免了多个< Routes />，主要用于子组件显示，作用类似于Vue中的router-view
V6嵌套路由实现
export const routerItems = [
path:'/',
Component:lazy(()=>import('./views/root')),
redirect:'/designdraft',
roles:[USER_ROLES.ADMIN,USER_ROLES.TEST],
children:[
path:'designdraft',
Component:lazy(()=>import('./views/designdraft/index')),
roles:[USER_ROLES.ADMIN],
path:'code',
Component:lazy(()=>import('./views/code/index')),
roles:[USER_ROLES.ADMIN],
children:[],
path:'/login',
Component:lazy(()=>import('./views/login')),
children:[]
path:'*',
Component:lazy(()=>import('./views/404')),
children:[]
import{ Suspense,lazy, useEffect } from 'react';
import {routerItems } from '../routers';
// 引入
import {
HashRouter as Router,
Routes,
Route,
Navigate,
} from 'react-router-dom';
// loading页面
const Loading = () => (
<div className='loadsvg'>
loading...
// 递归函数
const rotuerViews = (routerItems)=>{
if(routerItems && routerItems.length){
return routerItems.map(({path,Component,children,redirect})=>{
return children && children.length ? (
<Route path={path} key={path} element={<Suspense fallback={<Loading/>}><Component/></Suspense>}>
{rotuerViews(children)} // 递归遍历子路由
{redirect?
(<Route path={path} element={<Navigate to={redirect} />}></Route>):
(<Route path={path} element={<Navigate to={children[0].path} />}></Route>)
</Route>
<Route key={path} path={path} element={ <Suspense fallback={<Loading/>}><Component/></Suspense>}>
</Route>
const PageView = () => {
return (
<Router>
<Routes>
{rotuerViews(routerItems)}
</Routes>
</Router>
export default PageView;
