安装路由
$ 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 (
<Switch>
{
routes.map((route) => {
console.log(route)
return (
<Route
key={route.path}
path={route.path}
exact={route.exact}
render={(props) => {
return (
route.render
? route.render({...props,route})
: <route.component {...props} route={route} />
)
}}
/>
)
})
}
</Switch>
)
}
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>
{
routes.map((route) => (
<Route
key={route.path}
path={route.path}
exact={route.exact}
element={<route.component child={route.children} ></route.component>}
// v5
// render={(props) => (
// route.render
// ? route.render({...props, route})
// : <route.component {...props} route={route} />
// )}
>
{
route.children ? childRouterRender(route.children) : null
}
</Route>
))
}
</Routes>
)
}
const childRouterRender = (children) => (
children.map((child) => (
<Route
key={child.path}
path={child.path}
exact={child.exact}
element={<child.component />}
>
{
child.children ? childRouterRender(child.children) : null
}
</Route>
))
)
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 文件里将其写成 <element /> 形式，还是在函数里处理，因为如果要传参的话。不过参考了很多文章，都是直接在 routes 文件里直接写成组件形式了，所以我这个仅供参考使用方法。
