{"id":24550800,"url":"https://github.com/justbecoder/react-router-middleware-plus","last_synced_at":"2025-06-13T02:03:01.281Z","repository":{"id":45171768,"uuid":"501154542","full_name":"justbecoder/react-router-middleware-plus","owner":"justbecoder","description":"基于react-router-dom v6版本的路由权限配置化解决方案，引入中间件middleware的概念，零成本式解决路由权限控制难题。","archived":false,"fork":false,"pushed_at":"2022-08-17T15:48:53.000Z","size":117,"stargazers_count":23,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-13T02:02:59.645Z","etag":null,"topics":["auth","hooks","react","react-router","router"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/justbecoder.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-06-08T08:00:27.000Z","updated_at":"2024-03-11T02:07:12.000Z","dependencies_parsed_at":"2022-07-13T18:21:40.332Z","dependency_job_id":null,"html_url":"https://github.com/justbecoder/react-router-middleware-plus","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/justbecoder/react-router-middleware-plus","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justbecoder%2Freact-router-middleware-plus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justbecoder%2Freact-router-middleware-plus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justbecoder%2Freact-router-middleware-plus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justbecoder%2Freact-router-middleware-plus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/justbecoder","download_url":"https://codeload.github.com/justbecoder/react-router-middleware-plus/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justbecoder%2Freact-router-middleware-plus/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259565531,"owners_count":22877345,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["auth","hooks","react","react-router","router"],"created_at":"2025-01-23T01:14:28.557Z","updated_at":"2025-06-13T02:03:01.263Z","avatar_url":"https://github.com/justbecoder.png","language":"TypeScript","readme":"## react-router-middleware-plus\n\n## Introduce\n\n1、`react-router-middleware-plus` 是基于 `react-router-dom` `v6` 版本的路由权限配置化解决方案，引入中间件 `middleware`  的概念，零成本式解决路由权限控制难题。\n\n2、支持 `element` 使用 `\u003cDynamicImport element={() =\u003e import(xxx)} /\u003e` 的形式引入组件\n\n3、支持指定 `DynamicImport` 的 `loading` 属性，传入 `React.Suspense` 的 `fallback` 组件\n\n## Install\n\n```shell\nyarn add react-router-middleware-plus\n\nOR\n\nnpm install react-router-middleware-plus\n```\n\n## Usage\n\n1. **配置路由**\n\n```tsx\n/**\n * @file: 路由组件配置\n * @author: huxiaoshuai\n * @Date: 2022-06-08 00:45:03\n * @LastEditors: huxiaoshuai\n * @LastEditTime: 2022-06-10 23:33:14\n */\nimport React, {useEffect, useState} from 'react';\nimport {useNavigate, useParams} from 'react-router-dom';\nimport {DynamicImport, RouteObjectWithMiddleware, useRoutesWithMiddleware} from 'react-router-middleware-plus';\n\nimport App from './App';\n\n/**\n * @method getUserInfoApi\n * @description 模拟后端接口，返回用户登录数据\n */\nconst getUserInfoApi: any = () =\u003e {\n  return new Promise((resolve, reject) =\u003e {\n    setTimeout(() =\u003e {\n      // 已登录\n      resolve({\n        username: '胡小帅'\n      })\n      // 未登录\n      resolve(null)\n    }, 100)\n  })\n}\n\n\n/**\n * @method CheckLogin\n * @description 鉴权-登录\n */\nconst CheckLogin = ({children}: any) =\u003e {\n  const navigate = useNavigate();\n  const params = useParams();\n  const [userInfo, setUserInfo] = useState(null);\n\n  const getUserInfo = async () =\u003e {\n    const userInfo = await getUserInfoApi();\n\n    if (userInfo) {\n      setUserInfo(userInfo)\n    } else {\n      navigate('/login')\n    }\n  }\n\n  useEffect(() =\u003e {\n    getUserInfo()\n  }, [])\n\n\n  if (!userInfo) {\n    return null;\n  }\n  return children\n}\n\n/**\n * @method checkRole\n * @description 鉴权-用户角色\n */\nconst CheckRole = ({children}: any) =\u003e {\n  const navigate = useNavigate();\n  // 根据自己的页面，判断处理，async/await异步拉取用户数据即可。\n  const isAdmin = localStorage.getItem('role') === 'admin';\n\n  useEffect(() =\u003e {\n    if (!isAdmin) {\n      navigate('/', {\n        replace: true\n      })\n    }\n  }, [isAdmin])\n\n  // 通过鉴权\n  return isAdmin ? children : null\n}\n\n\nexport default function Router () {\n  /**\n   * @description 路由配置\n   *\n   */\n  const routes: RouteObjectWithMiddleware[] = [\n    {\n      path: '/',\n      element: \u003cApp /\u003e,\n      children: [\n        {\n          index: true,\n          element: \u003cDynamicImport element={() =\u003e import(\"./home\")} /\u003e\n        },\n        {\n          path: 'admin',\n          middleware: [CheckLogin, CheckRole],\n          element: \u003cDynamicImport element={() =\u003e import(\"./admin\")} /\u003e\n        }\n      ]\n    },\n    {\n      path: '/login',\n      element: \u003cDynamicImport element={() =\u003e import(\"./login\")} /\u003e\n    },\n  ]\n\n  return useRoutesWithMiddleware(routes)\n}\n\n```\n\n2. **渲染路由**\n\n```tsx\n/**\n * @file index.tsx 入口文件\n */\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport {BrowserRouter} from 'react-router-dom';\nimport Router from './router';\n\n\nReactDOM.createRoot(document.getElementById('root')!).render(\n  \u003cBrowserRouter\u003e\n    \u003cRouter/\u003e\n  \u003c/BrowserRouter\u003e\n);\n\n```\n\n对，是的，就是这么简单！就通过配置middleware，灵活搭配组合鉴权组件，在鉴权组件中自定义处理逻辑，路由权限处理问题解决了。\n\n## Props\n\nreact-router-middleware-plus在使用时和react-router-dom中的`useRoutes`是一致的。\n\n| 属性      | 类型                        | 描述                             | 是否可选 |\n|---------|---------------------------|--------------------------------|------|\n| routes  | React.ReactNode | 路由配置，在RoutesObject类型上扩展了`middleware`属性 | 否    |\n\n## 贡献者\n\n- [justbecoder](https://github.com/justbecoder)\n- [smithyj](https://github.com/smithyj)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjustbecoder%2Freact-router-middleware-plus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjustbecoder%2Freact-router-middleware-plus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjustbecoder%2Freact-router-middleware-plus/lists"}