UNPKG

@acrool/react-router-hash

Version:

Hash Route + History Route Additional based for React Route v6

431 lines (429 loc) 13.6 kB
import R from "react"; import { parsePath as fe } from "history"; import { useInRouterContext as he, useLocation as Z, matchRoutes as pe } from "react-router-dom"; function P(r, n) { if (!r) throw new Error(n); } function $(r, n) { if (!r) { typeof console < "u" && console.warn(n); try { throw new Error(n); } catch { } } } const J = {}; function de(r, n, a) { !n && !J[r] && (J[r] = !0, $(!1, a)); } const q = (r) => r.join("/").replace(/\/\/+/g, "/"); function Y(r) { let n = []; return R.Children.forEach(r, (a) => { if (!R.isValidElement(a)) return; if (a.type === R.Fragment) { n.push.apply( n, Y(a.props.children) ); return; } P( a.type === me, `[${typeof a.type == "string" ? a.type : a.type.name}] is not a <HashRoute> component. All component children of <HashRoutes> must be a <HashRoute> or <React.Fragment>` ); let s = { caseSensitive: a.props.caseSensitive, element: a.props.element, index: a.props.index, path: a.props.path }; a.props.children && (s.children = Y(a.props.children)), n.push(s); }), n; } function me(r) { P( !1, "A <HashRoute> is only ever to be used as the child of <HashRoutes> element, never rendered directly. Please wrap your <HashRoute> in a <HashRoutes>." ); } var w = { exports: {} }, g = {}; /** * @license React * react-jsx-runtime.production.js * * Copyright (c) Meta Platforms, Inc. and affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ var z; function Re() { if (z) return g; z = 1; var r = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment"); function a(s, c, h) { var f = null; if (h !== void 0 && (f = "" + h), c.key !== void 0 && (f = "" + c.key), "key" in c) { h = {}; for (var d in c) d !== "key" && (h[d] = c[d]); } else h = c; return c = h.ref, { $$typeof: r, type: s, key: f, ref: c !== void 0 ? c : null, props: h }; } return g.Fragment = n, g.jsx = a, g.jsxs = a, g; } var O = {}; /** * @license React * react-jsx-runtime.development.js * * Copyright (c) Meta Platforms, Inc. and affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ var B; function Ee() { return B || (B = 1, process.env.NODE_ENV !== "production" && function() { function r(e) { if (e == null) return null; if (typeof e == "function") return e.$$typeof === le ? null : e.displayName || e.name || null; if (typeof e == "string") return e; switch (e) { case j: return "Fragment"; case ee: return "Profiler"; case K: return "StrictMode"; case ae: return "Suspense"; case oe: return "SuspenseList"; case ue: return "Activity"; } if (typeof e == "object") switch (typeof e.tag == "number" && console.error( "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue." ), e.$$typeof) { case u: return "Portal"; case re: return (e.displayName || "Context") + ".Provider"; case te: return (e._context.displayName || "Context") + ".Consumer"; case ne: var t = e.render; return e = e.displayName, e || (e = t.displayName || t.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e; case se: return t = e.displayName || null, t !== null ? t : r(e.type) || "Memo"; case D: t = e._payload, e = e._init; try { return r(e(t)); } catch { } } return null; } function n(e) { return "" + e; } function a(e) { try { n(e); var t = !1; } catch { t = !0; } if (t) { t = console; var o = t.error, l = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object"; return o.call( t, "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.", l ), n(e); } } function s(e) { if (e === j) return "<>"; if (typeof e == "object" && e !== null && e.$$typeof === D) return "<...>"; try { var t = r(e); return t ? "<" + t + ">" : "<...>"; } catch { return "<...>"; } } function c() { var e = S.A; return e === null ? null : e.getOwner(); } function h() { return Error("react-stack-top-frame"); } function f(e) { if (I.call(e, "key")) { var t = Object.getOwnPropertyDescriptor(e, "key").get; if (t && t.isReactWarning) return !1; } return e.key !== void 0; } function d(e, t) { function o() { M || (M = !0, console.error( "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)", t )); } o.isReactWarning = !0, Object.defineProperty(e, "key", { get: o, configurable: !0 }); } function k() { var e = r(this.type); return W[e] || (W[e] = !0, console.error( "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release." )), e = this.props.ref, e !== void 0 ? e : null; } function v(e, t, o, l, E, m, C, N) { return o = m.ref, e = { $$typeof: T, type: e, key: t, props: m, _owner: E }, (o !== void 0 ? o : null) !== null ? Object.defineProperty(e, "ref", { enumerable: !1, get: k }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", { configurable: !1, enumerable: !1, writable: !0, value: 0 }), Object.defineProperty(e, "_debugInfo", { configurable: !1, enumerable: !1, writable: !0, value: null }), Object.defineProperty(e, "_debugStack", { configurable: !1, enumerable: !1, writable: !0, value: C }), Object.defineProperty(e, "_debugTask", { configurable: !1, enumerable: !1, writable: !0, value: N }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e; } function b(e, t, o, l, E, m, C, N) { var i = t.children; if (i !== void 0) if (l) if (ie(i)) { for (l = 0; l < i.length; l++) y(i[l]); Object.freeze && Object.freeze(i); } else console.error( "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead." ); else y(i); if (I.call(t, "key")) { i = r(e); var _ = Object.keys(t).filter(function(ce) { return ce !== "key"; }); l = 0 < _.length ? "{key: someKey, " + _.join(": ..., ") + ": ...}" : "{key: someKey}", V[i + l] || (_ = 0 < _.length ? "{" + _.join(": ..., ") + ": ...}" : "{}", console.error( `A props object containing a "key" prop is being spread into JSX: let props = %s; <%s {...props} /> React keys must be passed directly to JSX without using spread: let props = %s; <%s key={someKey} {...props} />`, l, i, _, i ), V[i + l] = !0); } if (i = null, o !== void 0 && (a(o), i = "" + o), f(t) && (a(t.key), i = "" + t.key), "key" in t) { o = {}; for (var H in t) H !== "key" && (o[H] = t[H]); } else o = t; return i && d( o, typeof e == "function" ? e.displayName || e.name || "Unknown" : e ), v( e, i, m, E, c(), o, C, N ); } function y(e) { typeof e == "object" && e !== null && e.$$typeof === T && e._store && (e._store.validated = 1); } var p = R, T = Symbol.for("react.transitional.element"), u = Symbol.for("react.portal"), j = Symbol.for("react.fragment"), K = Symbol.for("react.strict_mode"), ee = Symbol.for("react.profiler"), te = Symbol.for("react.consumer"), re = Symbol.for("react.context"), ne = Symbol.for("react.forward_ref"), ae = Symbol.for("react.suspense"), oe = Symbol.for("react.suspense_list"), se = Symbol.for("react.memo"), D = Symbol.for("react.lazy"), ue = Symbol.for("react.activity"), le = Symbol.for("react.client.reference"), S = p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, I = Object.prototype.hasOwnProperty, ie = Array.isArray, A = console.createTask ? console.createTask : function() { return null; }; p = { "react-stack-bottom-frame": function(e) { return e(); } }; var M, W = {}, L = p["react-stack-bottom-frame"].bind( p, h )(), U = A(s(h)), V = {}; O.Fragment = j, O.jsx = function(e, t, o, l, E) { var m = 1e4 > S.recentlyCreatedOwnerStacks++; return b( e, t, o, !1, l, E, m ? Error("react-stack-top-frame") : L, m ? A(s(e)) : U ); }, O.jsxs = function(e, t, o, l, E) { var m = 1e4 > S.recentlyCreatedOwnerStacks++; return b( e, t, o, !0, l, E, m ? Error("react-stack-top-frame") : L, m ? A(s(e)) : U ); }; }()), O; } var G; function ve() { return G || (G = 1, process.env.NODE_ENV === "production" ? w.exports = Re() : w.exports = Ee()), w.exports; } var Q = ve(); const x = R.createContext({ outlet: null, matches: [] }), F = R.createContext(null); process.env.NODE_ENV !== "production" && (x.displayName = "HashRoute", F.displayName = "HashOutlet"); const X = process.env.NODE_ENV !== "production"; function be(r, n = []) { return r == null ? null : r.reduceRight((a, s, c) => /* @__PURE__ */ Q.jsx( x.Provider, { children: s.route.element !== void 0 ? s.route.element : a, value: { outlet: a, matches: n.concat(r.slice(0, c + 1)) } } ), null); } function _e(r, n) { var T; P( he(), // TODO: This error is probably because they somehow have 2 versions of the // router loaded. We can help them understand how to avoid that. "useHashRoutes() may be used only in the context of a <HashRouter> component." ); let { matches: a } = R.useContext(x), s = a[a.length - 1], c = s ? s.params : {}, h = s ? s.pathname : "/", f = s ? s.pathnameBase : "/", d = s && s.route; if (X) { let u = d && d.path || ""; de( h, !d || u.endsWith("*"), `You rendered descendant <HashRoutes> (or called \`useRoutes()\`) at "${h}" (under <HashRoute path="${u}">) but the parent route path has no trailing "*". This means if you navigate deeper, the parent won't match anymore and therefore the child routes will never render. Please change the parent <HashRoute path="${u}"> to <HashRoute path="${u === "/" ? "*" : `${u}/*`}">.` ); } let k = Z(), v; if (n) { let u = typeof n == "string" ? fe(n) : n; P( f === "/" || ((T = u.pathname) == null ? void 0 : T.startsWith(f)), `When overriding the location using \`<Routes location>\` or \`useRoutes(routes, location)\`, the location pathname must begin with the portion of the URL pathname that was matched by all parent routes. The current pathname base is "${f}" but pathname "${u.pathname}" was given in the \`location\` prop.` ), v = u; } else v = k; let b = v.hash || "/", y = f === "#" ? b : b.slice(f.length) || "/", p = pe(r, { pathname: y }); return X && ($( b === "/" || d || p !== null, `No routes matched location.hash "${v.hash}" ` ), $( p == null || p[p.length - 1].route.element !== void 0, `Matched leaf route at location "${v.hash}" does not have an element. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.` )), be( p && p.map( (u) => Object.assign({}, u, { params: Object.assign({}, c, u.params), pathname: q([f, u.pathname]), pathnameBase: u.pathnameBase === "/" ? f : q([f, u.pathnameBase]) }) ), a ); } function ye({ children: r, location: n }) { const a = Y(r); return _e(a, n); } function we() { return R.useContext(F); } function Te(r) { let n = R.useContext(x).outlet; return n && /* @__PURE__ */ Q.jsx(F.Provider, { value: r, children: n }); } function Pe() { let { matches: r } = R.useContext(x), n = r[r.length - 1]; return n ? n.params : {}; } function ke() { var n; const r = (n = Z()) == null ? void 0 : n.hash; return r ? r.replace("#", "") : ""; } function je(r) { return Te(r.context); } export { je as HashOutlet, me as HashRoute, ye as HashRoutes, Te as useHashOutlet, we as useHashOutletContext, Pe as useHashParams, ke as useHashPathname };