react-router路由之routerRender方法（v5 v6）

安装路由

$ npm  i react-router-dom

安装 react-router-dom 的即已附带 react-router 核心包

普通版

直接使用使用 Route 组件完成类似于 vue 的 router-view + routes 的布局

函数版

通过类 routes 配置文件和相关封装函数完成便捷性路由布局

v5版本下的渲染

 // 函数版  
import React from 'react'
import { Route, Switch} from 'react-router-dom'

const renderRoutes = (routes) => {
  if (!routes) {
    return null
  }
  return (
    
      {
        routes.map((route) => {
          console.log(route)
          return (
             {
                 return (
                   route.render
                     ? route.render({...props,route})
                     : 
                 )
              }}
            />
          )
        })
      }
    
  )
}

export default renderRoutes

import {
  DashboardOutlined,
  BankOutlined,
} from '@ant-design/icons'
import Login from '../views/login'
import Dashboard from '../views/dashboard'
import FrameLayout from '../layout/frame-layout'
import Hospital from '../views/hospital'
import Doctor from '../views/hospital/doctor'
import Department from '../views/hospital/department'
import Introduction from '../views/hospital/introduction'

const routes = [
  {
    path: '/login',
    component: Login,
    exact: true,
  },
  {
    path: '/',
    component: FrameLayout,
    children: [
      {
        path: '/dashboard',
        component: Dashboard,
        meta: {
          title: '首页',
          icon: DashboardOutlined,
        },
      },
      {
        path: '/hospital',
        component: Hospital,
        meta: {
          title: '医院信息',
          icon: BankOutlined,
        },
        children: [
          {
            path: '/hospital/doctor',
            component: Doctor,
            meta: {
              title: '医生管理',
            },
          },
          {
            path: '/hospital/department',
            component: Department,
            meta: {
              title: '科室管理',
            },
          },
          {
            path: '/hospital/introduction',
            component: Introduction,
            meta: {
              title: '医院介绍',
            },
          },
        ],
      },
    ],
  },
]

export default routes

---

v5版本下的渲染

// v6版本下的渲染， 需要多渲染一次，考虑到循环嵌套子路由的问题，写了个函数再渲染
import React from 'react'
import { Route, Routes } from 'react-router-dom'

const renderRoutes = (routes) => {
  if (!routes) {
    return null
  }
  return (
    
      {
        routes.map((route) => (
          }
            // v5
            // render={(props) => (
            //   route.render
            //     ? route.render({...props, route})
            //     : 
            // )}
          >
            {
              route.children ? childRouterRender(route.children) : null
            }
          
        ))
      }
    
  )
}

const childRouterRender = (children) => (
  children.map((child) => (
    }
    >
      {
        child.children ? childRouterRender(child.children) : null
      }
    
  ))
)

export default renderRoutes

// v6 版routes文件
// react
import React from 'react'
// 导入组件
import Layout from '../components/layout'
// 登陆
import Login from '../views/login/login'
// 首页
import Home from '../views/home/home'
// 仓库管理
import Inventory from '../views/inventory/inventory'
import InventoryList from '../views/inventory/inventoryList'
import InventoryPost from '../views/inventory/inventoryPost'
import InventoryNews from '../views/inventory/inventoryNews'

// 导入图标
import { UserOutlined, HomeFilled, HddFilled, ShopFilled, SettingFilled } from '@ant-design/icons';

const routes = [
  {
    path: '/login',
    component: Login,
    exact: true,
  },
  {
    path: '/*',
    component: Layout,
    children: [
      {
        to: 'home',
        path: 'home',
        component: Home,
        exact: true,
        meta: {
          title: '首页',
          icon: HomeFilled,
        },
      },
      {
        path: 'inventory/*',
        to: 'inventory/*',
        component: Inventory,
        exact: true,
        meta: {
          title: '货存管理',
          icon: HddFilled,
        },
        children: [
          {
            path: 'inventoryList',
            to: 'inventory/inventoryList',
            component: InventoryList,
            exact: true,
            meta: {
              title: '货存列表',
            },
          },
          {
            path: 'inventoryPost',
            to: 'inventory/inventoryPost',
            component: InventoryPost,
            exact: true,
            meta: {
              title: '新品进库',
            },
          },
          {
            path: 'inventoryNews',
            to: 'inventory/inventoryNews',
            component: InventoryNews,
            exact: true,
            meta: {
              title: '货存通知',
            },
          },
        ],
      },
    ],
  },
]

export default routes

总结：

• 封装 routerRender 的方法大体上差不多，但是 react-router v6版本的结构不一样，首先路由跳转的路径和 route 组件里的 path 完全不一样，如果说为了快速开发，请记得将两者区分开。
• 其次只要是有子路由的一律都要在末尾加上 /*
• V6 没有 render 和 component 的组件属性，仅使用 element ，目前还不清楚是在 routes 文件里将其写成 形式，还是在函数里处理，因为如果要传参的话。不过参考了很多文章，都是直接在 routes 文件里直接写成组件形式了，所以我这个仅供参考使用方法。