Package Exports

@uiw-admin/router-control
@uiw-admin/router-control/esm/index.js
@uiw-admin/router-control/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@uiw-admin/router-control) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

菜单路由管理

在项目根目录的config/routes.json配置菜单路由

进行路由处理转换

进行路由权限处理

⚠️ 注意：

菜单路由文件优先级 json > ts > js
菜单路由使用js和ts文件时，如果文件中已经书写 import React from "react" 这句代码，在生成的 .uiw/routes.tsx 文件中不会再次进行生成

安装

npm i @uiw-admin/router-control --save # yarn add  @uiw-admin/router-control

路由控制组件参数

参数	必须	类型	默认值	说明
routeType	否	`"history" \| "hash" \| "browser"`	`hash`	路由模式
addModels	否	`(path: string) => Promise<{ default: any }>`	undefined
isAutoAuth	否	`boolean`	`history`	是否自动校验 "/" 的路由 token 是否存在

如果验证登录的字段不是token,可通过https://uiwjs.github.io/uiw-admin/#/config?title=defaultdefinetype-%E7%B1%BB%E5%9E%8B TOKEN_NAME 自定义

⚠️注意： routeType值为 history或browser 的时候需要设置 kktrc 配置 publicPath 值为 "/"

// kktrc.ts 
// ...
export default defaultConfig({
  publicPath:"/",
  // ...
})

菜单路由参数

参数	必须	类型	默认值	说明
index	否	`boolean`	undefined	默认跳转(与`redirect`一起使用)
redirect	否	`string`	undefined	重定向当`index===true`生效
path	否	`string`	undefined	跳转路由
name	否	`string`	undefined	菜单名称
icon	否	`string \| React.React.Node`	undefined	菜单图标标
component	否	`string`	undefined	渲染组件的路径(如果是`403/404/500`的页面直接写 `403/404/500`,使用`@uiw-admin/plugins`里面的`routes`时会进行转换)
hideInMenu	否	`boolean`	无	是否隐藏菜单
isAuth	否	`boolean`	无	用于路由校验权限，注意：如果存在这个字段则以这个字段权限为准
routes	否	`RoutersJSON[]`	无	子集路由 ,(参数与菜单路由参数一致)
navigate	否	`string`	无	自定义跳转(`"(navigate) => {console.log('navigate', navigate)}"`)

自定义菜单图标

注意：使用js或ts文件才有自定义功能

// config/routes.js

import { chat } from "@/assets"
import { Icon } from "uiw"
import React from "react"
const routes = [
  {
    "path": "/",
    "component": "@/layouts/BasicLayout",
    "routes": [
      {
        "index": true,
        "redirect": "/tableList"
      },
      {
        "path": "/tableList",
        "name": "查询表格",
        "component": "@/pages/TableList",
        "icon": <Icon type={chat} />,
      },
    ]
  }
]
export default routes

组件提供-路由跳转方法

navigate 由 react-router-dom的useNavigate hook 赋值生成
history 当 routeType="history" 才能使用，使用方式

// navigate 使用方式
navigate("/demo",{/** ... */})

// history 使用方式
history.push("/demo");
history.push("/demo?d=12", { some: "state" });
history.push(
  {
    pathname: "/demo",
    search: "?d=12",
  },
  {
    some: 1212,
  }
);
history.go(-1);
history.back();

routes.json案例

@ 指向 src 目录

[
  {
    "path": "/login",
    "component": "@/layouts/UserLayout"
  },
  {
    "path": "/",
    "component": "@/layouts/BasicLayout",
    "routes": [
      {
        "index": true,
        "redirect": "/tableList"
      },
      {
        "path": "/home",
        "name": "首页",
        "component": "@/pages/TableList",
        "icon": "home"
      },
      {
        "path": "/dom",
        "name": "子项",
        "icon": "copy",
        "routes": [
          {
            "path": "/dom/courses",
            "name": "Dashboard",
            "component": "@/pages/Dashboard"
          }
        ]
      },
      {
        "path": "/403",
        "name": "403",
        "hideInMenu": true,
        "component": "403"
      },
      {
        "path": "/500",
        "name": "500",
        "hideInMenu": true,
        "component": "500"
      },
      {
        "path": "/404",
        "name": "404",
        "hideInMenu": true,
        "component": "404"
      },
      {
        "path": "*",
        "name": "404",
        "component": "404"
      }
    ]
  }
]

案例

import React from "react";
import Control from '@uiw-admin/router-control';
export default ()=>{
  return (
    <Control
      routeType="hash"
       // addModels={(path) => import(`${path}`)}
    />
  )
}

贡献者

感谢所有的贡献者，欢迎开发者为开源项目贡献力量。

License

Licensed under the MIT License.