react-router-dom v6应用

react-router-dom

作为一名近几年一直在用Vue生态的前端 $小程序,UniApp,Sass$ 包括一些H5 甚至开发桌端应用也是用的Vue $nwjs打包,Electron插件打包$

对于react基本上每隔一段会看,毕竟是前端中很重要的一个框架,工作中不用可以但是不能不会起码到用到的时候能以最快速度适应

一直认为react-router-dom v5 特别麻烦特别是跟vue-router一对比后不过两个框架随着升级写法越来越像了比如: hook函数 , pinia与mobx , vue-router与react-router-dom v6

V6版本抽离路由表

不好的

xml 复制代码

    // 写法繁杂  不灵活   随着业务增多代码阅读困难
    <Routes>
        <Route path="/a" element={<A />}>
          <Route path="/a/child1" element={<Achild1 />} />
          <Route path="/a/child2" element={<Achild2 />} />
        </Route>
        <Route path="/b" element={<B />} />
        <Route path="/c" element={<C />} />
    </Routes>

抽离路由表 router/routes.js

javascript 复制代码

/**
 *  典型的路由嵌套结构 
 *
 */ 

import { Navigate } from 'react-router-dom'
import { lazy } from 'react'

export const routes = [
    {
        path:'/',
        element:()=><Navigate to="/a/achild1" />,
        meta:{
            name:"A页面",
            isLogin:false
        }
    },
    {
        path:'/a',
        element:lazy(()=>import('./../components/a')),
        children:[
            {
                path:'/a/achild1',
                element:lazy(()=>import('./../components/achild/achild1')),
                meta:{
                    name:"A页面",
                    isLogin:false
                }
            },
            {
                path:'/a/achild2',
                element:lazy(()=>import('./../components/achild/achild2')),
                meta:{
                    name:"A页面",
                    isLogin:false
                }
            },
        ],
        meta:{
            name:"A页面",
            isLogin:false
        }
    },
    {
        path:'/b',
        element:lazy(()=>import('./../components/b')),
        children:[],
        meta:{
            name:"B页面",
            isLogin:true
        }
    },
    {
        path:'/c',
        element:lazy(()=>import('./../components/c')),
        children:[],
        meta:{
            name:"C页面",
            isLogin:true
        }
    },
    {
        path:'/login',
        element:lazy(()=>import('./../components/login')),
        children:[],
        meta:{
            name:"登录",
            isLogin:false
        }
    }
]

既然能拿到路由表无非就是生成 < Routes />嵌套结构需要的信息在路由表中都能拿到不管多少子集路由一个递归函数即可

xml 复制代码

    <Routes>
        <Route path="/a" element={<A />}>
          <Route path="/a/child1" element={<Achild1 />} />
          <Route path="/a/child2" element={<Achild2 />} />
        </Route>
        <Route path="/b" element={<B />} />
        <Route path="/c" element={<C />} />
    </Routes>

router/index.js

javascript 复制代码

import { routes } from "./routes";
import {
  Routes,
  Route,
  useLocation,
  useParams,
  useSearchParams,
  useNavigate,
  Navigate,
} from "react-router-dom";
import { Suspense } from "react";
/**
 * 处理组件
 * @params { Route } props
 * 根据不同的业务 处理组件不用的逻辑等
 * */ 
const Element = (props) => {
  const {
    element: Component,
    meta: { name, isLogin },
  } = props;
//   将路由信息传递
  const navigate = useNavigate();
  const location = useLocation();
  const params = useParams();
  const [usp] = useSearchParams();
//   权限的demo等
//   if (name) document.title = name;
//   if (isLogin) {
//     if (!window.sessionStorage.getItem("login")) {
//       return <Navigate to="/login"></Navigate>;
//     }
//   }
  return (
    <Component
      navigate={navigate}
      location={location}
      params={params}
      usp={usp}
    />
  );
};
/**
 * 创建 Route
 * @params { Array } routes
 * 
 * */ 
export const createElement = (routes) => {
  return (
    <>
      {routes.map((item) => {
        const { path, children } = item;
        return (
          <Route key={item.path} path={path} element={<Element {...item} />}>
            {/* 有子集 , 递归调用 */}
            {Array.isArray(children) ? createElement(children) : null}
          </Route>
        );
      })}
    </>
  );
};

export default function RouterView() {
  return (
    <Suspense fallback="正在加载中...">
      <Routes>{createElement(routes)}</Routes>
    </Suspense>
  );
}