commit c4dfe038c5bd9ab1ec69e09211cf56f9edaaa58d Author: syy11cn Date: Fri Oct 22 15:00:20 2021 +0800 init config-router diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..74a8175 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +/node_modules diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..0605329 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,6 @@ +{ + "files.associations": { + "*.ttss": "css", + "*.ttml": "xml" + } +} \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..e69de29 diff --git a/package.json b/package.json new file mode 100644 index 0000000..c351057 --- /dev/null +++ b/package.json @@ -0,0 +1,16 @@ +{ + "name": "config-router", + "version": "1.0.0", + "main": "index.js", + "license": "MIT", + "dependencies": { + "react-router-dom": "^5.3.0" + }, + "devDependencies": { + "@types/react": "^17.0.31", + "@types/react-dom": "^17.0.10", + "@types/react-router-dom": "^5.3.1", + "react": "^17.0.2", + "typescript": "^4.4.4" + } +} diff --git a/src/index.tsx b/src/index.tsx new file mode 100644 index 0000000..8411aab --- /dev/null +++ b/src/index.tsx @@ -0,0 +1,83 @@ +import { FunctionComponent } from 'react'; +import { + Switch, + useLocation, + useRouteMatch, + Route, + Redirect, +} from 'react-router-dom'; +import routeType from '../typings/routeType'; + +interface RouterViewProps { + routes: Array; + onEnter: (to: string, next: Function) => void; +} + +const RouterView: FunctionComponent = ({ + routes, + onEnter, +}) => { + const { pathname } = useLocation(); + const match = useRouteMatch(); + console.log('当前页面路径：' + pathname); + console.log('路径匹配', match); + + let redirectPath: string = ''; + let agreeToGo = true; + + function next(path?: string) { + agreeToGo = true; + if (path) { + redirectPath = path; + } + } + + onEnter(pathname, next); + + return ( + + {routes.map((route, index) => { + // If auth needed. + if (route.auth) { + // If `next()` called. + if (agreeToGo) { + // Need to redirect. + if (redirectPath) { + return ; + } else { + // OK to render. + return ( + ( + + )} + > + ); + } + } + } else { + // No need for auth. + return ( + ( + + )} + > + ); + } + })} + + ); +}; + +export { RouterView }; diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..3670c0c --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "target": "ESNext", + "useDefineForClassFields": true, + "lib": ["DOM", "DOM.Iterable", "ESNext"], + "allowJs": false, + "skipLibCheck": false, + "esModuleInterop": false, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "module": "ESNext", + "moduleResolution": "Node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx" + }, + "include": ["./src/**/*"] +} diff --git a/typings/routeType.ts b/typings/routeType.ts new file mode 100644 index 0000000..3ca771b --- /dev/null +++ b/typings/routeType.ts @@ -0,0 +1,11 @@ +import React from 'react'; + +interface routeType { + path: string; + component: React.ComponentType; + auth?: boolean; + exact?: boolean; + routes?: Array | undefined; +} + +export default routeType; diff --git a/yarn.lock b/yarn.lock new file mode 100644 index 0000000..2579270 --- /dev/null +++ b/yarn.lock @@ -0,0 +1,200 @@ +# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. +# yarn lockfile v1 + + +"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13": + version "7.15.4" + resolved "https://registry.nlark.com/@babel/runtime/download/@babel/runtime-7.15.4.tgz?cache=0&sync_timestamp=1630618785994&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40babel%2Fruntime%2Fdownload%2F%40babel%2Fruntime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a" + integrity sha1-/RfRa/34eObdAtGXU6OfqKjZyEo= + dependencies: + regenerator-runtime "^0.13.4" + +"@types/history@*": + version "4.7.9" + resolved "https://registry.nlark.com/@types/history/download/@types/history-4.7.9.tgz#1cfb6d60ef3822c589f18e70f8b12f9a28ce8724" + integrity sha1-HPttYO84IsWJ8Y5w+LEvmijOhyQ= + +"@types/prop-types@*": + version "15.7.4" + resolved "https://registry.nlark.com/@types/prop-types/download/@types/prop-types-15.7.4.tgz?cache=0&sync_timestamp=1629708737049&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40types%2Fprop-types%2Fdownload%2F%40types%2Fprop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11" + integrity sha1-/PcgXCXf95Xuea8eMNosl5CAjxE= + +"@types/react-dom@^17.0.10": + version "17.0.10" + resolved "https://registry.npmmirror.com/@types/react-dom/download/@types/react-dom-17.0.10.tgz#d6972ec018d23cf22b99597f1289343d99ea9d9d" + integrity sha1-1pcuwBjSPPIrmVl/Eok0PZnqnZ0= + dependencies: + "@types/react" "*" + +"@types/react-router-dom@^5.3.1": + version "5.3.1" + resolved "https://registry.npmmirror.com/@types/react-router-dom/download/@types/react-router-dom-5.3.1.tgz#76700ccce6529413ec723024b71f01fc77a4a980" + integrity sha1-dnAMzOZSlBPscjAktx8B/HekqYA= + dependencies: + "@types/history" "*" + "@types/react" "*" + "@types/react-router" "*" + +"@types/react-router@*": + version "5.1.17" + resolved "https://registry.npmmirror.com/@types/react-router/download/@types/react-router-5.1.17.tgz#087091006213b11042f39570e5cd414863693968" + integrity sha1-CHCRAGITsRBC85Vw5c1BSGNpOWg= + dependencies: + "@types/history" "*" + "@types/react" "*" + +"@types/react@*", "@types/react@^17.0.31": + version "17.0.31" + resolved "https://registry.npmmirror.com/@types/react/download/@types/react-17.0.31.tgz?cache=0&sync_timestamp=1634781829085&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40types%2Freact%2Fdownload%2F%40types%2Freact-17.0.31.tgz#fe05ebf91ff3ae35bb6b13f6c1b461db8089dff8" + integrity sha1-/gXr+R/zrjW7axP2wbRh24CJ3/g= + dependencies: + "@types/prop-types" "*" + "@types/scheduler" "*" + csstype "^3.0.2" + +"@types/scheduler@*": + version "0.16.2" + resolved "https://registry.nlark.com/@types/scheduler/download/@types/scheduler-0.16.2.tgz?cache=0&sync_timestamp=1629709281824&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40types%2Fscheduler%2Fdownload%2F%40types%2Fscheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39" + integrity sha1-GmL4lSVyPd4kuhsBsJK/XfitTTk= + +csstype@^3.0.2: + version "3.0.9" + resolved "https://registry.nlark.com/csstype/download/csstype-3.0.9.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcsstype%2Fdownload%2Fcsstype-3.0.9.tgz#6410af31b26bd0520933d02cbc64fce9ce3fbf0b" + integrity sha1-ZBCvMbJr0FIJM9AsvGT86c4/vws= + +history@^4.9.0: + version "4.10.1" + resolved "https://registry.nlark.com/history/download/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3" + integrity sha1-MzcaZeOoOyZ0NOKz87G0xYqtTPM= + dependencies: + "@babel/runtime" "^7.1.2" + loose-envify "^1.2.0" + resolve-pathname "^3.0.0" + tiny-invariant "^1.0.2" + tiny-warning "^1.0.0" + value-equal "^1.0.1" + +hoist-non-react-statics@^3.1.0: + version "3.3.2" + resolved "https://registry.npm.taobao.org/hoist-non-react-statics/download/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" + integrity sha1-7OCsr3HWLClpwuxZ/v9CpLGoW0U= + dependencies: + react-is "^16.7.0" + +isarray@0.0.1: + version "0.0.1" + resolved "https://registry.nlark.com/isarray/download/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf" + integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8= + +"js-tokens@^3.0.0 || ^4.0.0": + version "4.0.0" + resolved "https://registry.nlark.com/js-tokens/download/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" + integrity sha1-GSA/tZmR35jjoocFDUZHzerzJJk= + +loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0: + version "1.4.0" + resolved "https://registry.nlark.com/loose-envify/download/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" + integrity sha1-ce5R+nvkyuwaY4OffmgtgTLTDK8= + dependencies: + js-tokens "^3.0.0 || ^4.0.0" + +mini-create-react-context@^0.4.0: + version "0.4.1" + resolved "https://registry.npm.taobao.org/mini-create-react-context/download/mini-create-react-context-0.4.1.tgz#072171561bfdc922da08a60c2197a497cc2d1d5e" + integrity sha1-ByFxVhv9ySLaCKYMIZekl8wtHV4= + dependencies: + "@babel/runtime" "^7.12.1" + tiny-warning "^1.0.3" + +object-assign@^4.1.1: + version "4.1.1" + resolved "https://registry.nlark.com/object-assign/download/object-assign-4.1.1.tgz?cache=0&sync_timestamp=1618846798176&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fobject-assign%2Fdownload%2Fobject-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" + integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM= + +path-to-regexp@^1.7.0: + version "1.8.0" + resolved "https://registry.npm.taobao.org/path-to-regexp/download/path-to-regexp-1.8.0.tgz#887b3ba9d84393e87a0a0b9f4cb756198b53548a" + integrity sha1-iHs7qdhDk+h6CgufTLdWGYtTVIo= + dependencies: + isarray "0.0.1" + +prop-types@^15.6.2: + version "15.7.2" + resolved "https://registry.npm.taobao.org/prop-types/download/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" + integrity sha1-UsQedbjIfnK52TYOAga5ncv/psU= + dependencies: + loose-envify "^1.4.0" + object-assign "^4.1.1" + react-is "^16.8.1" + +react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1: + version "16.13.1" + resolved "https://registry.npmmirror.com/react-is/download/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" + integrity sha1-eJcppNw23imZ3BVt1sHZwYzqVqQ= + +react-router-dom@^5.3.0: + version "5.3.0" + resolved "https://registry.npmmirror.com/react-router-dom/download/react-router-dom-5.3.0.tgz#da1bfb535a0e89a712a93b97dd76f47ad1f32363" + integrity sha1-2hv7U1oOiacSqTuX3Xb0etHzI2M= + dependencies: + "@babel/runtime" "^7.12.13" + history "^4.9.0" + loose-envify "^1.3.1" + prop-types "^15.6.2" + react-router "5.2.1" + tiny-invariant "^1.0.2" + tiny-warning "^1.0.0" + +react-router@5.2.1: + version "5.2.1" + resolved "https://registry.npmmirror.com/react-router/download/react-router-5.2.1.tgz#4d2e4e9d5ae9425091845b8dbc6d9d276239774d" + integrity sha1-TS5OnVrpQlCRhFuNvG2dJ2I5d00= + dependencies: + "@babel/runtime" "^7.12.13" + history "^4.9.0" + hoist-non-react-statics "^3.1.0" + loose-envify "^1.3.1" + mini-create-react-context "^0.4.0" + path-to-regexp "^1.7.0" + prop-types "^15.6.2" + react-is "^16.6.0" + tiny-invariant "^1.0.2" + tiny-warning "^1.0.0" + +react@^17.0.2: + version "17.0.2" + resolved "https://registry.npmmirror.com/react/download/react-17.0.2.tgz?cache=0&sync_timestamp=1634744107176&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Freact%2Fdownload%2Freact-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" + integrity sha1-0LXMUW0p6z7uOD91tihkz7aAADc= + dependencies: + loose-envify "^1.1.0" + object-assign "^4.1.1" + +regenerator-runtime@^0.13.4: + version "0.13.9" + resolved "https://registry.nlark.com/regenerator-runtime/download/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52" + integrity sha1-iSV0Kpj/2QgUmI11Zq0wyjsmO1I= + +resolve-pathname@^3.0.0: + version "3.0.0" + resolved "https://registry.npm.taobao.org/resolve-pathname/download/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd" + integrity sha1-mdAiJNPPJjaJvsuzk7xWAxMCXc0= + +tiny-invariant@^1.0.2: + version "1.1.0" + resolved "https://registry.npm.taobao.org/tiny-invariant/download/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875" + integrity sha1-Y0xfjv3CdxS384bDXmdgmR0jCHU= + +tiny-warning@^1.0.0, tiny-warning@^1.0.3: + version "1.0.3" + resolved "https://registry.npm.taobao.org/tiny-warning/download/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754" + integrity sha1-lKMNtFPfTGQ9D9VmBg1gqHXYR1Q= + +typescript@^4.4.4: + version "4.4.4" + resolved "https://registry.npmmirror.com/typescript/download/typescript-4.4.4.tgz?cache=0&sync_timestamp=1634801063383&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Ftypescript%2Fdownload%2Ftypescript-4.4.4.tgz#2cd01a1a1f160704d3101fd5a58ff0f9fcb8030c" + integrity sha1-LNAaGh8WBwTTEB/VpY/w+fy4Aww= + +value-equal@^1.0.1: + version "1.0.1" + resolved "https://registry.nlark.com/value-equal/download/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c" + integrity sha1-Hgt5THNMXAyt4XnEN9NW2TGjTWw=