- {(config.transition ? delayMatch : match) ? children : null}
+
+ {actualDisplay ? children : null}
}
);
-}, (prev, next) => JSON.stringify(prev.config) === JSON.stringify(next.config));
\ No newline at end of file
+}, (prev, next) => prev.path === next.path);
\ No newline at end of file
diff --git a/src/core/Router.tsx b/src/core/Router.tsx
index 2ad829b..9d2bcd5 100644
--- a/src/core/Router.tsx
+++ b/src/core/Router.tsx
@@ -1,7 +1,7 @@
import React, { lazy, Suspense, FC, memo, useState, useMemo, useEffect, useCallback } from 'react';
import { Route, withRouter, useHistory } from 'react-router-dom';
import { throttle } from 'lodash-es';
-import { IPageRouter, IRouterProps } from '../..';
+import { IPageRouter, IRouterProps } from '../../index.d';
import { Provider, useRefContext } from '../context/context';
import { KeepAlive } from './KeepAlive';
import { findMatchRoute } from '../utils/utils';
@@ -14,9 +14,11 @@ const Router: FC
= memo(({ routers, fallback, redirect, beforeEach
const [loading, _setLoading] = useState(true);
const data = useRefContext()!;
+ const delayLoad = delay || 100;
+
const setLoading = useCallback(throttle((_loading: boolean) => {
_setLoading(_loading);
- }, (delay || 500), { leading: false, trailing: true }), [_setLoading]);
+ }, delayLoad, { leading: false, trailing: true }), [_setLoading]);
const Loading = useMemo(() => {
const Fallback = fallback;
@@ -37,14 +39,10 @@ const Router: FC = memo(({ routers, fallback, redirect, beforeEach
*/
const Page = (params: IPageRouter) => {
if (!params.Component) return false;
- const waitForComponent = async () => {
- const component = await params.Component!();
- return component;
- };
- const Component = lazy(async () => ({ default: withRouter(await waitForComponent()) }));
let alive = false;
if (keepAlive !== undefined) alive = keepAlive;
if (params.keepAlive !== undefined) alive = params.keepAlive;
+
data.map[params.path] = {
name: params.name || '',
beforeRoute: params.beforeRoute,
@@ -53,11 +51,23 @@ const Router: FC = memo(({ routers, fallback, redirect, beforeEach
selfMatched: [],
path: params.path,
switchRoute,
- transition: params.transition || transition
+ transition: params.transition || transition,
+ delay: delayLoad,
+ haveBeforeEach: !!beforeEach,
+ ready: false
};
+
+ const waitForComponent = async () => {
+ const asyncTask = () => new Promise(resolve => setTimeout(() => resolve(), 2000));
+ await asyncTask();
+ const component = await params.Component!();
+ setTimeout(() => data.map[params.path].ready = true);
+ return component;
+ };
+ const Component = lazy(async () => ({ default: withRouter(await waitForComponent()) }));
return (
-
+
@@ -78,7 +88,7 @@ const Router: FC = memo(({ routers, fallback, redirect, beforeEach
return acc;
};
return routers.reduce((acc, crr) => createPage(acc, crr), []);
- }, [JSON.stringify({ keepAlive, routers, switchRoute })]);
+ }, [keepAlive, routers, switchRoute]);
const notEnterHandler = (from: string, redirect?: boolean) => {
data.isReplace = true && !redirect;
diff --git a/src/index.ts b/src/index.ts
index b087e46..9a26912 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,3 +1,4 @@
export { Routers } from './core/Router';
-export { useActive, useDeActive, useParams } from './context/hooks';
-export { useRefContext } from './context/context';
\ No newline at end of file
+export { useRefContext } from './context/context';
+export * from './context/hooks';
+export * from './utils/transition';
\ No newline at end of file
diff --git a/src/utils/transition.ts b/src/utils/transition.ts
new file mode 100644
index 0000000..b5fae92
--- /dev/null
+++ b/src/utils/transition.ts
@@ -0,0 +1,82 @@
+import { ITransition } from "../../index.d";
+
+const Slide = {
+ match: {
+ transform: 'translateX(0)'
+ },
+ trans: {
+ transition: 'all 500ms ease'
+ },
+ delay: 500
+};
+
+const Fade = {
+ ...Slide,
+ match: {
+ ...Slide.match,
+ opacity: 1,
+ },
+ notMatch: {
+ opacity: 0,
+ }
+};
+
+export const LeftFade: ITransition = {
+ ...Fade,
+ notMatch: {
+ ...Fade.notMatch,
+ transform: 'translateX(-30vw)'
+ }
+};
+
+export const RightFade: ITransition = {
+ ...Fade,
+ notMatch: {
+ ...Fade.notMatch,
+ transform: 'translateX(30vw)'
+ }
+};
+
+export const TopFade: ITransition = {
+ ...Fade,
+ notMatch: {
+ ...Fade.notMatch,
+ transform: 'translateY(-30vh)'
+ }
+};
+
+export const BottomFade: ITransition = {
+ ...Fade,
+ notMatch: {
+ ...Fade.notMatch,
+ transform: 'translateY(30vh)'
+ }
+};
+
+export const LeftSlide: ITransition = {
+ ...Slide,
+ notMatch: {
+ transform: 'translateX(-100vw)'
+ }
+};
+
+export const RightSlide: ITransition = {
+ ...Slide,
+ notMatch: {
+ transform: 'translateX(100vw)'
+ }
+};
+
+export const TopSlide: ITransition = {
+ ...Slide,
+ notMatch: {
+ transform: 'translateY(-100vh)'
+ }
+};
+
+export const BottomSlide: ITransition = {
+ ...Slide,
+ notMatch: {
+ transform: 'translateY(100vh)'
+ }
+};
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index d3ba205..c38ea8f 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -1,7 +1,7 @@
import { match, matchPath } from "react-router";
import { notExistPath } from "./constants";
-const getOptions = path => ({
+const getOptions = (path: string) => ({
path,
exact: true
});
@@ -30,3 +30,16 @@ export const findMatch = (map: { [key: string]: any }, path: string) =>
return acc;
}, undefined as unknown as match);
};
+
+export const setTimeoutTask = (task: () => T) => new Promise(resolve => setTimeout(() => {
+ resolve(task());
+}, 100));
+
+export const getWithinTime = async (task: () => T) => {
+ const timeout = 10000;
+ const start = Number(new Date());
+ while (Number(new Date()) - start < timeout) {
+ const res = await setTimeoutTask(task);
+ if (res) return res;
+ }
+};
\ No newline at end of file
diff --git a/test/async.tsx b/test/async.tsx
index 89770de..0ff9db6 100644
--- a/test/async.tsx
+++ b/test/async.tsx
@@ -1,6 +1,6 @@
import React, { FC, useState } from 'react';
import { Link } from 'react-router-dom';
-import { useActive, useDeActive } from '../src/index';
+import { useActive, useRefContext } from '../src/index';
const Sub: FC = () => {
@@ -18,19 +18,22 @@ export const AsyncComponent: FC = () => {
const data = Number(new Date());
useActive(() => {
console.log('page1 active', data);
+ return () => {
+ console.log('page1 deactive', data);
+ }
});
- useDeActive(() => {
- console.log('page1 deactive', data);
- });
+
+ const ref = useRefContext();
+ console.log(ref)
return (
- <>
+
page1
page2
{show && }
-
+
page2
,
children: [
{
path: '/:page', // test/page2/page3
@@ -51,7 +52,7 @@ const App: FC = () => {
}
]}
beforeEach={async (from, to) => {
- await asyncTask();
+ // await asyncTask();
console.log('beforeEach', from, to, data);
}}
redirect='/page1'
diff --git a/yarn.lock b/yarn.lock
index 9deb311..ac93c28 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8132,6 +8132,13 @@ react-router@5.2.0, react-router@^5.2.0:
tiny-invariant "^1.0.2"
tiny-warning "^1.0.0"
+react-routers@^2.0.2:
+ version "2.0.2"
+ resolved "https://registry.yarnpkg.com/react-routers/-/react-routers-2.0.2.tgz#7ac6f616c7101ae420b37740976ba185e0cbd55a"
+ integrity sha512-4zSKHT9KDTtXrlloo9X1OGZ3KwJdviiYJVCfvEc8S+xkMBqcjOwI0UTbS7WmNh5ZpdlR+ZELYTXXQPsGlrh5WQ==
+ dependencies:
+ lodash-es "^4.17.20"
+
react@^17.0.1:
version "17.0.1"
resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"
+
+
+
+