{"id":19025329,"url":"https://github.com/bert0324/react-routers","last_synced_at":"2025-04-23T12:44:03.411Z","repository":{"id":54819188,"uuid":"330649425","full_name":"Bert0324/react-routers","owner":"Bert0324","description":"🌠  A React Component for quick configuring route","archived":false,"fork":false,"pushed_at":"2021-01-29T06:32:47.000Z","size":1047,"stargazers_count":11,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-18T00:10:32.076Z","etag":null,"topics":["javascript","javascript-library","reacr","reacr-router-dom","react-router","router","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Bert0324.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":"2021-01-18T11:47:35.000Z","updated_at":"2021-01-29T06:32:49.000Z","dependencies_parsed_at":"2022-08-14T03:50:14.339Z","dependency_job_id":null,"html_url":"https://github.com/Bert0324/react-routers","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bert0324%2Freact-routers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bert0324%2Freact-routers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bert0324%2Freact-routers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bert0324%2Freact-routers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Bert0324","download_url":"https://codeload.github.com/Bert0324/react-routers/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250436958,"owners_count":21430594,"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":["javascript","javascript-library","reacr","reacr-router-dom","react-router","router","typescript"],"created_at":"2024-11-08T20:43:14.645Z","updated_at":"2025-04-23T12:44:03.385Z","avatar_url":"https://github.com/Bert0324.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Routers\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"./assets/icon.jpeg\" alt=\"fre logo\" width=\"130\"\u003e\u003c/p\u003e\n\u003ch1 align=\"center\"\u003eReact Routers\u003c/h1\u003e\n\u003cp align=\"center\"\u003e🌠 A React Component for quick configuring route\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://github.com/Bert0324/react-routers/blob/main/LICENCE\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-MIT-blue.svg\" alt=\"LICENCE\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/react-routers\"\u003e\u003cimg src=\"https://badge.fury.io/js/react-routers.svg\" alt=\"NPM VERSION\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/Bert0324/react-routers/pulls\"\u003e\u003cimg src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg\" alt=\"PR WELCOME\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/bert0324/react-routers\"\u003e\u003cimg src=\"https://githubbadges.com/star.svg?user=bert0324\u0026repo=react-routers\u0026style=default\" alt=\"STAR\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/bert0324/react-routers/fork\"\u003e\u003cimg src=\"https://githubbadges.com/fork.svg?user=bert0324\u0026repo=react-routers\u0026style=default\" alt=\"FOLK\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## ⭐ Features\n\n- Static Routes like [`react-router-config`](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config)\n- Route Guard and `keep-alive` like `Vue`\n- Auto Lazy Load\n- Easy **prefetch**\n- Simple Transition Animation\n- Change `document.title` with Configuration\n- Tiny Size, unpacked 13KB\n- Full Typescript Support\n\n## 🏠 Installation\n\n- `yarn add react-routers`\n\n## 🎠 Example \u0026 Playground\n\n```tsx\nimport { BrowserRouter } from 'react-router-dom';\nimport { Routers } from 'react-routers';\n\nconst App = () =\u003e {\n    return (\n        \u003cBrowserRouter basename='prefix'\u003e\n            \u003cRouters\n                routers={[\n                    {\n                        path: '/page',\n                        Component: async () =\u003e (await import('./Component')).Component\n                    }\n                ]}\n            /\u003e\n        \u003c/BrowserRouter\u003e\n    )\n}\n```\n\nA playground of `react-routers` in [HERE](https://stackblitz.com/edit/react-routers-demo).\n\n## 📑 API\n\n### Props of `Routers`\n\n#### `routers`\n\nThe Router configuration, the path in children will be jointed with the path in parent. Its type is as below:\n\n```ts\ninterface IPageRouter {\n    /**\n     * route path\n     */\n    path: string;\n    /**\n     * document.title, if not set, will use original title in html\n     */\n    name?: string;\n    /**\n     * the lazy load Component\n     */\n    Component?: () =\u003e (Promise\u003cComponentType\u003cany\u003e\u003e | ComponentType\u003cany\u003e);\n    /**\n     * children configuration\n     * - child node will inherit parent node configuration\n     * - child node configuration has higher priority than parent node configuration\n     */\n    children?: IPageRouter[];\n    /**\n     * triggered before entering route\n     * - if return false, deny to enter route\\\n     * - after `beforeEach`\n     */\n    beforeRoute?: IBeforeRoute;\n    /**\n     * triggered after entering route\n     * - if return false, deny to enter route\n     * - ahead of `afterEach`\n     */\n    afterRoute?: IAfterRoute;\n    /**\n     * maintains component state and avoids repeated re-rendering for the route\n     * - default is `false`\n     * - its priority is higher than `keepAlive` in props\n     */\n    keepAlive?: boolean;\n    /**\n     * transition animation\n     */\n    transition?: ITransition;\n    /**\n     * the path list to prefetch\n     * - parent node prefetch will be append after current node prefetch\n     */\n    prefetch?: string[];\n}\n```\n\n#### `fallback`\n\nA fallback react tree to show when a Suspense child (like React.lazy) suspends, and before entering the route. It must be a React Component.\n\n#### `redirect`\n\nredirect path.\n\n#### `beforeEach`\n\ntriggered before entering route\n\n- if return false, deny to enter route\n- ahead of any `beforeRoute`\n\n#### `afterEach`\n\ntriggered after entering route\n\n- if return false, deny to enter route\n- after any `afterRoute`\n\n#### `keepAlive`\n\ndo maintains component state and avoids repeated re-rendering for each route\n\n- default is `false`\n\n#### `switchRoute`\n\nDo select only one route like `\u003cSwitch\u003e`\n\n- default is `true`\n\n#### `transition`\n\ntransition animation. Its type is as below:\n\n```ts\ntype ITransition = {\n    /**\n     * the css style after matched\n     */\n    match: CSSProperties;\n    /**\n     * the css style after unmatched\n     */\n    notMatch: CSSProperties;\n    /**\n     * the css style of transition\n     */\n    trans: CSSProperties;\n    /**\n     * keep component after unmatched\n     * - default is `500`ms\n     */\n    delay?: number;\n};\n```\n\nor directly use embedded animation objects.\n\n#### `delay`\n\nloading delay\n\n- default is `100`ms\n\n#### `prefetchDelay`\n\nhow much time delayed to start prefetch after main thread is idle\n\n- default is `0` ms\n\n### Hooks\n\n#### `useActive` \u0026 `useDeactive`\n\nThe hook triggered when the component's active state has changed.\n\nWHEN DO YOU NEED IT?\n\n- If a component is set as `keepAlive`, and you want to trigger something when the component is activated.\n\n```ts\nimport { useActive, useDeactive } from 'react-routers';\n\nuseActive(() =\u003e {\n    /* Called when the component is activated. */\n});\n\nuseDeactive(() =\u003e {\n    /* Called when the component is deactivated. */\n});\n```\n\n#### `useParams` \u0026 `useRouteMatch`\n\nA wrapped function of [`useParams`](https://reactrouter.com/web/api/Hooks/useroutematch) \u0026 [`useRouteMatch`](https://reactrouter.com/web/api/Hooks/useroutematch)\n\nAs `react-router` don't have the configuration configured in `react-routers`, if you want to get params in route, you should use this hook.\n\n```ts\nimport { useParams, useRouteMatch } from 'react-routers';\n\n// /blog/:slug\nconst { slug } = useParams\u003c{ slug?:string }\u003e(); \nconst match = useRouteMatch\u003c{ slug?:string }\u003e();\n```\n\n### Embedded Animation\n\nThe object which can be put in `transition`, includes `Fade`, `LeftFade`, `RightFade`, `TopFade`, `BottomFade`, `LeftSlide`, `RightSlide`, `TopSlide`, `BottomSlide`.\n\n## 💻 Development\n\n- `yarn`\n- `preview=true yarn dev`\n- `yarn build`\n\n## 🍧 License\n\nReact Routers is [MIT licensed](https://github.com/Bert0324/react-routers/blob/main/LICENCE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbert0324%2Freact-routers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbert0324%2Freact-routers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbert0324%2Freact-routers/lists"}