@shuvi/router-react 0.0.1-rc.33

package/lib/Link.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { State, PathRecord } from '@shuvi/router';
+/**
+ * The public API for rendering a history-aware <a>.
+ */
+export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
+    replace?: boolean;
+    state?: State;
+    to: PathRecord;
+}

package/lib/Link.js

@@ -0,0 +1,77 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const prop_types_1 = __importDefault(require("prop-types"));
+const _1 = require(".");
+const router_1 = require("@shuvi/router");
+const constants_1 = require("./constants");
+const hooks_1 = require("./hooks");
+function isModifiedEvent(event) {
+    return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
+}
+/**
+ * The public API for rendering a history-aware <a>.
+ */
+exports.Link = React.forwardRef(function LinkWithRef(_a, ref) {
+    var { onClick, replace: replaceProp = false, state, target, to } = _a, rest = __rest(_a, ["onClick", "replace", "state", "target", "to"]);
+    let href = _1.useHref(to);
+    let navigate = _1.useNavigate();
+    const location = hooks_1.useCurrentRoute();
+    let path = _1.useResolvedPath(to);
+    function handleClick(event) {
+        if (onClick)
+            onClick(event);
+        if (!event.defaultPrevented && // onClick prevented default
+            event.button === 0 && // Ignore everything but left clicks
+            (!target || target === '_self') && // Let browser handle "target=_blank" etc.
+            !isModifiedEvent(event) // Ignore clicks with modifier keys
+        ) {
+            event.preventDefault();
+            // If the URL hasn't changed, a regular <a> will do a replace instead of
+            // a push, so do the same here.
+            let replace = !!replaceProp || router_1.pathToString(location) === router_1.pathToString(path);
+            navigate(to, { replace, state });
+        }
+    }
+    return (
+    // @ts-ignore
+    React.createElement("a", Object.assign({}, rest, { href: href, onClick: handleClick, ref: ref, target: target })));
+});
+if (constants_1.__DEV__) {
+    exports.Link.displayName = 'Link';
+    exports.Link.propTypes = {
+        onClick: prop_types_1.default.func,
+        replace: prop_types_1.default.bool,
+        state: prop_types_1.default.object,
+        target: prop_types_1.default.string,
+        to: prop_types_1.default.oneOfType([
+            prop_types_1.default.string,
+            prop_types_1.default.shape({
+                pathname: prop_types_1.default.string,
+                search: prop_types_1.default.string,
+                hash: prop_types_1.default.string
+            })
+        ]).isRequired
+    };
+}

package/lib/MemoryRouter.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { IMemoryRouterProps } from './types';
+/**
+ * A <Router> that stores all entries in memory.
+ */
+export declare function MemoryRouter({ basename, children, routes, initialEntries, initialIndex }: IMemoryRouterProps): React.ReactElement;
+export declare namespace MemoryRouter {
+    var displayName: string;
+    var propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        routes: PropTypes.Requireable<(object | null | undefined)[]>;
+        initialEntries: PropTypes.Requireable<(string | PropTypes.InferProps<{
+            pathname: PropTypes.Requireable<string>;
+            search: PropTypes.Requireable<string>;
+            hash: PropTypes.Requireable<string>;
+            state: PropTypes.Requireable<object>;
+            key: PropTypes.Requireable<string>;
+        }> | null | undefined)[]>;
+        initialIndex: PropTypes.Requireable<number>;
+    };
+}

package/lib/MemoryRouter.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const prop_types_1 = __importDefault(require("prop-types"));
+const router_1 = require("@shuvi/router");
+const Router_1 = require("./Router");
+const constants_1 = require("./constants");
+/**
+ * A <Router> that stores all entries in memory.
+ */
+function MemoryRouter({ basename, children, routes, initialEntries, initialIndex }) {
+    let routerRef = react_1.default.useRef();
+    if (routerRef.current == null) {
+        routerRef.current = router_1.createRouter({
+            basename,
+            routes: routes || [],
+            history: router_1.createMemoryHistory({ initialEntries, initialIndex })
+        });
+    }
+    return react_1.default.createElement(Router_1.Router, { children: children, router: routerRef.current });
+}
+exports.MemoryRouter = MemoryRouter;
+if (constants_1.__DEV__) {
+    MemoryRouter.displayName = 'MemoryRouter';
+    MemoryRouter.propTypes = {
+        children: prop_types_1.default.node,
+        routes: prop_types_1.default.arrayOf(prop_types_1.default.object),
+        initialEntries: prop_types_1.default.arrayOf(prop_types_1.default.oneOfType([
+            prop_types_1.default.string,
+            prop_types_1.default.shape({
+                pathname: prop_types_1.default.string,
+                search: prop_types_1.default.string,
+                hash: prop_types_1.default.string,
+                state: prop_types_1.default.object,
+                key: prop_types_1.default.string
+            })
+        ])),
+        initialIndex: prop_types_1.default.number
+    };
+}

package/lib/Router.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { IRouterProps } from './types';
+/**
+ * Provides location context for the rest of the app.
+ *
+ * Note: You usually won't render a <Router> directly. Instead, you'll render a
+ * router that is more specific to your environment such as a <BrowserRouter>
+ * in web browsers or a <StaticRouter> for server rendering.
+ */
+export declare function Router({ children, static: staticProp, router }: IRouterProps): React.ReactElement;
+export declare namespace Router {
+    var displayName: string;
+    var propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        router: PropTypes.Requireable<object>;
+        static: PropTypes.Requireable<boolean>;
+    };
+}

package/lib/Router.js

@@ -0,0 +1,56 @@
+"use strict";
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const prop_types_1 = __importDefault(require("prop-types"));
+const invariant_1 = __importDefault(require("@shuvi/utils/lib/invariant"));
+const contexts_1 = require("./contexts");
+const hooks_1 = require("./hooks");
+const constants_1 = require("./constants");
+const utils_1 = require("./utils");
+/**
+ * Provides location context for the rest of the app.
+ *
+ * Note: You usually won't render a <Router> directly. Instead, you'll render a
+ * router that is more specific to your environment such as a <BrowserRouter>
+ * in web browsers or a <StaticRouter> for server rendering.
+ */
+function Router({ children = null, static: staticProp = false, router }) {
+    invariant_1.default(!hooks_1.useInRouterContext(), `You cannot render a <Router> inside another <Router>.` +
+        ` You never need more than one.`);
+    const contextVal = react_1.default.useMemo(() => {
+        return {
+            static: staticProp,
+            router: router
+        };
+    }, [staticProp, router]);
+    const unmount = react_1.useRef(false);
+    const forceupdate = react_1.useReducer(s => s * -1, 1)[1];
+    utils_1.useIsomorphicEffect(() => () => (unmount.current = true), []);
+    utils_1.useIsomorphicEffect(() => router.listen(() => {
+        if (unmount.current) {
+            return;
+        }
+        forceupdate();
+    }), [router]);
+    return (react_1.default.createElement(contexts_1.RouterContext.Provider, { value: contextVal },
+        react_1.default.createElement(contexts_1.RouteContext.Provider, { children: children, value: router.current })));
+}
+exports.Router = Router;
+if (constants_1.__DEV__) {
+    Router.displayName = 'Router';
+    Router.propTypes = {
+        children: prop_types_1.default.node,
+        router: prop_types_1.default.object,
+        static: prop_types_1.default.bool
+    };
+}

package/lib/RouterView.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare function RouterView(): React.ReactElement | null;
+export declare namespace RouterView {
+    var displayName: string;
+}

package/lib/RouterView.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("@shuvi/router/lib/utils");
+const hooks_1 = require("./hooks");
+const constants_1 = require("./constants");
+const contexts_1 = require("./contexts");
+const utils_2 = require("./utils");
+const defaultElement = react_1.default.createElement(RouterView, null);
+function RouterView() {
+    let { depth, pathname: parentPathname, params: parentParams } = react_1.default.useContext(contexts_1.MatchedRouteContext);
+    const { matches } = hooks_1.useCurrentRoute();
+    if (!matches) {
+        return null;
+    }
+    // Otherwise render an element.
+    const matched = matches[depth];
+    if (!matched) {
+        if (constants_1.__DEV__) {
+            utils_2.warningOnce(parentPathname, false, `Use <RouterView/> under path "${parentPathname}", but it has no children routes.` +
+                `\n\n` +
+                `Please remove the <RouterView/>.`);
+        }
+        return null;
+    }
+    const { route, params, pathname } = matched;
+    const element = route.component
+        ? react_1.default.createElement(route.component, route.props)
+        : defaultElement;
+    return (react_1.default.createElement(contexts_1.MatchedRouteContext.Provider, { children: element, value: {
+            depth: depth + 1,
+            params: utils_2.readOnly(Object.assign(Object.assign({}, parentParams), params)),
+            pathname: utils_1.joinPaths([parentPathname, pathname]),
+            route
+        } }));
+}
+exports.RouterView = RouterView;
+if (constants_1.__DEV__) {
+    RouterView.displayName = 'RouterView';
+}

package/lib/constants.d.ts

@@ -0,0 +1 @@
+export declare const __DEV__: boolean;

package/lib/constants.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.__DEV__ = process.env.NODE_ENV !== 'production';

package/lib/contexts.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IRoute } from '@shuvi/router';
+import { IRouterContextObject, IRouteContextObject } from './types';
+export declare const RouterContext: React.Context<IRouterContextObject>;
+export declare const RouteContext: React.Context<IRoute<import("@shuvi/router").IRouteRecord<any>>>;
+export declare const MatchedRouteContext: React.Context<IRouteContextObject>;

package/lib/contexts.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("./utils");
+const constants_1 = require("./constants");
+exports.RouterContext = react_1.default.createContext(null);
+if (constants_1.__DEV__) {
+    exports.RouterContext.displayName = 'Router';
+}
+exports.RouteContext = react_1.default.createContext(null);
+if (constants_1.__DEV__) {
+    exports.RouterContext.displayName = 'Route';
+}
+exports.MatchedRouteContext = react_1.default.createContext({
+    depth: 0,
+    params: utils_1.readOnly({}),
+    pathname: '',
+    route: null
+});
+if (constants_1.__DEV__) {
+    exports.MatchedRouteContext.displayName = 'MatchedRoute';
+}

package/lib/hooks.d.ts

@@ -0,0 +1,41 @@
+import { IParams, IPathMatch, Blocker, Path, PathRecord, IRouter, IPathPattern } from '@shuvi/router';
+import { INavigateFunction } from './types';
+export declare function useCurrentRoute(): import("@shuvi/router").IRoute<import("@shuvi/router").IRouteRecord<any>>;
+/**
+ * Blocks all navigation attempts. This is useful for preventing the page from
+ * changing until some condition is met, like saving form data.
+ */
+export declare function useBlocker(blocker: Blocker, when?: boolean): void;
+/**
+ * Returns the full href for the given "to" value. This is useful for building
+ * custom links that are also accessible and preserve right-click behavior.
+ */
+export declare function useHref(to: PathRecord): string;
+/**
+ * Returns true if this component is a descendant of a <Router>.
+ */
+export declare function useInRouterContext(): boolean;
+/**
+ * Returns true if the URL for the given "to" value matches the current URL.
+ * This is useful for components that need to know "active" state, e.g.
+ * <NavLink>.
+ */
+export declare function useMatch(pattern: IPathPattern): IPathMatch | null;
+/**
+ * Returns an imperative method for changing the location. Used by <Link>s, but
+ * may also be used by other elements to change the location.
+ */
+export declare function useNavigate(): INavigateFunction;
+/**
+ * Returns an object of key/value pairs of the dynamic params from the current
+ * URL that were matched by the route path.
+ */
+export declare function useParams(): IParams;
+/**
+ * Resolves the pathname of the given `to` value against the current location.
+ */
+export declare function useResolvedPath(to: PathRecord): Path;
+/**
+ * Returns the current router object
+ */
+export declare function useRouter(): IRouter;

package/lib/hooks.js

@@ -0,0 +1,129 @@
+"use strict";
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const router_1 = require("@shuvi/router");
+const invariant_1 = __importDefault(require("@shuvi/utils/lib/invariant"));
+const contexts_1 = require("./contexts");
+const utils_1 = require("./utils");
+function useCurrentRoute() {
+    return react_1.useContext(contexts_1.RouteContext);
+}
+exports.useCurrentRoute = useCurrentRoute;
+/**
+ * Blocks all navigation attempts. This is useful for preventing the page from
+ * changing until some condition is met, like saving form data.
+ */
+function useBlocker(blocker, when = true) {
+    invariant_1.default(useInRouterContext(), `useBlocker() may be used only in the context of a <Router> component.`);
+    const { router } = react_1.useContext(contexts_1.RouterContext);
+    react_1.default.useEffect(() => {
+        if (!when)
+            return;
+        let unblock = router.block((tx) => {
+            let autoUnblockingTx = Object.assign(Object.assign({}, tx), { retry() {
+                    // Automatically unblock the transition so it can play all the way
+                    // through before retrying it. TODO: Figure out how to re-enable
+                    // this block if the transition is cancelled for some reason.
+                    unblock();
+                    tx.retry();
+                } });
+            blocker(autoUnblockingTx);
+        });
+        return unblock;
+    }, [router, blocker, when]);
+}
+exports.useBlocker = useBlocker;
+/**
+ * Returns the full href for the given "to" value. This is useful for building
+ * custom links that are also accessible and preserve right-click behavior.
+ */
+function useHref(to) {
+    invariant_1.default(useInRouterContext(), `useHref() may be used only in the context of a <Router> component.`);
+    const { router } = react_1.useContext(contexts_1.RouterContext);
+    const path = useResolvedPath(to);
+    return router.resolve(path).href;
+}
+exports.useHref = useHref;
+/**
+ * Returns true if this component is a descendant of a <Router>.
+ */
+function useInRouterContext() {
+    return react_1.useContext(contexts_1.RouterContext) != null;
+}
+exports.useInRouterContext = useInRouterContext;
+/**
+ * Returns true if the URL for the given "to" value matches the current URL.
+ * This is useful for components that need to know "active" state, e.g.
+ * <NavLink>.
+ */
+function useMatch(pattern) {
+    invariant_1.default(useInRouterContext(), `useMatch() may be used only in the context of a <Router> component.`);
+    const { pathname } = useCurrentRoute();
+    return router_1.matchPathname(pattern, pathname);
+}
+exports.useMatch = useMatch;
+/**
+ * Returns an imperative method for changing the location. Used by <Link>s, but
+ * may also be used by other elements to change the location.
+ */
+function useNavigate() {
+    invariant_1.default(useInRouterContext(), `useNavigate() may be used only in the context of a <Router> component.`);
+    const { router } = react_1.useContext(contexts_1.RouterContext);
+    const { pathname } = react_1.useContext(contexts_1.MatchedRouteContext);
+    const activeRef = react_1.default.useRef(false);
+    react_1.default.useEffect(() => {
+        activeRef.current = true;
+    });
+    let navigate = react_1.default.useCallback((to, options = {}) => {
+        if (activeRef.current) {
+            if (typeof to === 'number') {
+                router.go(to);
+            }
+            else {
+                let { path } = router.resolve(to, pathname);
+                (!!options.replace ? router.replace : router.push).call(router, path, options.state);
+            }
+        }
+        else {
+            utils_1.warning(false, `You should call navigate() in a useEffect, not when ` +
+                `your component is first rendered.`);
+        }
+    }, [router, pathname]);
+    return navigate;
+}
+exports.useNavigate = useNavigate;
+/**
+ * Returns an object of key/value pairs of the dynamic params from the current
+ * URL that were matched by the route path.
+ */
+function useParams() {
+    return react_1.useContext(contexts_1.MatchedRouteContext).params;
+}
+exports.useParams = useParams;
+/**
+ * Resolves the pathname of the given `to` value against the current location.
+ */
+function useResolvedPath(to) {
+    const { router } = react_1.useContext(contexts_1.RouterContext);
+    const { pathname } = react_1.useContext(contexts_1.MatchedRouteContext);
+    return react_1.default.useMemo(() => router.resolve(to, pathname).path, [to, pathname]);
+}
+exports.useResolvedPath = useResolvedPath;
+/**
+ * Returns the current router object
+ */
+function useRouter() {
+    invariant_1.default(useInRouterContext(), `useRouter() may be used only in the context of a <Router> component.`);
+    return react_1.useContext(contexts_1.RouterContext).router;
+}
+exports.useRouter = useRouter;

package/lib/index.d.ts

@@ -0,0 +1,8 @@
+export { generatePath } from './utils';
+export { MemoryRouter } from './MemoryRouter';
+export { RouterView } from './RouterView';
+export { Router } from './Router';
+export { Link } from './Link';
+export { withRouter } from './withRouter';
+export * from './hooks';
+export * from './types';

package/lib/index.js

@@ -0,0 +1,18 @@
+"use strict";
+function __export(m) {
+    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
+Object.defineProperty(exports, "__esModule", { value: true });
+var utils_1 = require("./utils");
+exports.generatePath = utils_1.generatePath;
+var MemoryRouter_1 = require("./MemoryRouter");
+exports.MemoryRouter = MemoryRouter_1.MemoryRouter;
+var RouterView_1 = require("./RouterView");
+exports.RouterView = RouterView_1.RouterView;
+var Router_1 = require("./Router");
+exports.Router = Router_1.Router;
+var Link_1 = require("./Link");
+exports.Link = Link_1.Link;
+var withRouter_1 = require("./withRouter");
+exports.withRouter = withRouter_1.withRouter;
+__export(require("./hooks"));

package/lib/types.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+import { IParams, InitialEntry, State, PathRecord, IRouteRecord as IOriginRouteRecord, IPartialRouteRecord as IOriginalRouteRecord, IRouter } from '@shuvi/router';
+export declare type IRouteRecord = IOriginRouteRecord<React.ReactNode>;
+export declare type IPartialRouteRecord = IOriginalRouteRecord;
+export interface IRouterContextObject {
+    static: boolean;
+    router: IRouter;
+}
+export interface IRouteContextObject {
+    depth: number;
+    params: IParams;
+    pathname: string;
+    route: IRouteRecord | null;
+}
+export interface IMemoryRouterProps {
+    basename?: string;
+    children?: React.ReactNode;
+    routes?: IRouteRecord[];
+    initialEntries?: InitialEntry[];
+    initialIndex?: number;
+}
+export interface INavigateProps {
+    to: PathRecord;
+    replace?: boolean;
+    state?: State;
+}
+export interface IOutletProps {
+}
+export interface IRouterProps {
+    children?: React.ReactNode;
+    static?: boolean;
+    router: IRouter;
+}
+export interface IRoutesProps {
+    basename?: string;
+    children?: React.ReactNode;
+}
+/**
+ * The interface for the navigate() function returned from useNavigate().
+ */
+export interface INavigateFunction {
+    (to: PathRecord, options?: {
+        replace?: boolean;
+        state?: State;
+    }): void;
+    (delta: number): void;
+}

package/lib/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/utils.d.ts

@@ -0,0 +1,9 @@
+import { IParams } from '@shuvi/router';
+export declare function useIsomorphicEffect(cb: any, deps: any): void;
+export declare const readOnly: <T extends unknown>(obj: T) => T;
+export declare function warning(cond: boolean, message: string): void;
+export declare function warningOnce(key: string, cond: boolean, message: string): void;
+/**
+ * Returns a path with params interpolated.
+ */
+export declare function generatePath(path: string, params?: IParams): string;

package/lib/utils.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const router_1 = require("@shuvi/router");
+const react_1 = require("react");
+const constants_1 = require("./constants");
+function useIsomorphicEffect(cb, deps) {
+    if (typeof window !== 'undefined') {
+        react_1.useLayoutEffect(cb, deps);
+    }
+    else {
+        react_1.useEffect(cb, deps);
+    }
+}
+exports.useIsomorphicEffect = useIsomorphicEffect;
+exports.readOnly = constants_1.__DEV__
+    ? obj => Object.freeze(obj)
+    : obj => obj;
+function warning(cond, message) {
+    if (!cond) {
+        if (typeof console !== 'undefined')
+            console.warn(message);
+        try {
+            // Welcome to debugging React Router!
+            //
+            // This error is thrown as a convenience so you can more easily
+            // find the source for a warning that appears in the console by
+            // enabling "pause on exceptions" in your JavaScript debugger.
+            throw new Error(message);
+        }
+        catch (e) { }
+    }
+}
+exports.warning = warning;
+const alreadyWarned = {};
+function warningOnce(key, cond, message) {
+    if (!cond && !alreadyWarned[key]) {
+        alreadyWarned[key] = true;
+        warning(false, message);
+    }
+}
+exports.warningOnce = warningOnce;
+/**
+ * Returns a path with params interpolated.
+ */
+function generatePath(path, params = {}) {
+    return router_1.matchStringify(path, params);
+}
+exports.generatePath = generatePath;

package/lib/withRouter.d.ts

@@ -0,0 +1,8 @@
+import { IRouter } from '@shuvi/router';
+import { Runtime } from '@shuvi/service';
+import React from 'react';
+export declare type WithRouterProps = {
+    router: IRouter;
+};
+export declare type ExcludeRouterProps<P> = Pick<P, Exclude<keyof P, keyof WithRouterProps>>;
+export declare function withRouter<P extends WithRouterProps>(ComposedComponent: Runtime.IRouteComponent<React.ComponentType<P>, any>): Runtime.IRouteComponent<React.ComponentType<ExcludeRouterProps<P>>, any>;

package/lib/withRouter.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const hooks_1 = require("./hooks");
+function withRouter(ComposedComponent) {
+    function WithRouterWrapper(props) {
+        return react_1.default.createElement(ComposedComponent, Object.assign({ router: hooks_1.useRouter() }, props));
+    }
+    WithRouterWrapper.getInitialProps = ComposedComponent.getInitialProps;
+    if (process.env.NODE_ENV !== 'production') {
+        const name = ComposedComponent.displayName || ComposedComponent.name || 'Unknown';
+        WithRouterWrapper.displayName = `withRouter(${name})`;
+    }
+    return WithRouterWrapper;
+}
+exports.withRouter = withRouter;

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@shuvi/router-react",
+  "version": "0.0.1-rc.33",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/shuvijs/shuvi.git",
+    "directory": "packages/router-react"
+  },
+  "author": "liximomo",
+  "license": "MIT",
+  "main": "lib/index.js",
+  "module": "esm/index.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "dev": "run-p watch:*",
+    "watch:esm": "tsc -p tsconfig.build.esm.json -w",
+    "watch:cjs": "tsc -p tsconfig.build.cjs.json -w",
+    "prebuild": "rimraf lib esm",
+    "build": "run-p build:*",
+    "build:esm": "tsc -p tsconfig.build.esm.json",
+    "build:cjs": "tsc -p tsconfig.build.cjs.json"
+  },
+  "engines": {
+    "node": ">= 12.0.0"
+  },
+  "dependencies": {
+    "@shuvi/router": "^0.0.1-rc.33",
+    "@shuvi/service": "^0.0.1-rc.33"
+  },
+  "devDependencies": {
+    "@types/react": "^16.9.43",
+    "@types/react-test-renderer": "^16.9.2",
+    "react-test-renderer": "^16.13.1"
+  },
+  "peerDependencies": {
+    "react": ">=16.8"
+  },
+  "gitHead": "ee2abab3c102f68450cf1fb6b2c833d5a59fb0c7"
+}