Allow HashRouter URL without leading slash

contributors.yml

@@ -13,3 +13,4 @@
 - timdorr
 - turansky
 - sergiodxa
+- thejohnhoffer

package.json

@@ -41,7 +41,7 @@
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "next",
-    "history": "^5.0.0",
+    "history-noslash": "^5.2.0-noslash.2.0",
     "jest": "^26.6.3",
     "jsonfile": "^6.1.0",
     "metro-react-native-babel-preset": "^0.57.0",

packages/react-router-dom/index.tsx

@@ -1,6 +1,10 @@
 import * as React from "react";
-import type { BrowserHistory, HashHistory, History } from "history";
-import { createBrowserHistory, createHashHistory, createPath } from "history";
+import type { BrowserHistory, HashHistory, History } from "history-noslash";
+import {
+  createBrowserHistory,
+  createHashHistory,
+  createPath
+} from "history-noslash";
 import {
   MemoryRouter,
   Navigate,
@@ -12,6 +16,7 @@ import {
   generatePath,
   matchRoutes,
   matchPath,
+  parseLocation,
   resolvePath,
   renderMatches,
   useHref,
@@ -60,6 +65,7 @@ export {
   generatePath,
   matchRoutes,
   matchPath,
+  parseLocation,
   renderMatches,
   resolvePath,
   useHref,
@@ -169,10 +175,15 @@ export interface HashRouterProps {
  * A <Router> for use in web browsers. Stores the location in the hash
  * portion of the URL so it is not sent to the server.
  */
-export function HashRouter({ basename, children, window }: HashRouterProps) {
+export function HashRouter({
+  basename = "/",
+  children,
+  window
+}: HashRouterProps) {
   let historyRef = React.useRef<HashHistory>();
+  let hashRoot = basename === "" ? "" : "/";
   if (historyRef.current == null) {
-    historyRef.current = createHashHistory({ window });
+    historyRef.current = createHashHistory({ window, hashRoot });
   }
 
   let history = historyRef.current;

packages/react-router-dom/package.json

@@ -15,7 +15,7 @@
   "unpkg": "./umd/react-router-dom.production.min.js",
   "dependencies": {
     "react-router": "6.0.2",
-    "history": "^5.1.0"
+    "history-noslash": "^5.2.0-noslash.2.0"
   },
   "peerDependencies": {
     "react": ">=16.8",

packages/react-router-dom/server.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Action, Location, To, createPath, parsePath } from "history";
+import { Action, Location, To, createPath, parsePath } from "history-noslash";
 import { Router } from "react-router-dom";
 
 export interface StaticRouterProps {

packages/react-router-native/index.tsx

@@ -19,6 +19,7 @@ import {
   generatePath,
   matchRoutes,
   matchPath,
+  parseLocation,
   resolvePath,
   renderMatches,
   useHref,
@@ -52,6 +53,7 @@ export {
   generatePath,
   matchRoutes,
   matchPath,
+  parseLocation,
   resolvePath,
   renderMatches,
   useHref,

packages/react-router/index.tsx

@@ -6,12 +6,12 @@ import type {
   MemoryHistory,
   Path,
   To
-} from "history";
+} from "history-noslash";
 import {
   Action as NavigationType,
   createMemoryHistory,
   parsePath
-} from "history";
+} from "history-noslash";
 
 export type { Location, Path, To, NavigationType };
 
@@ -277,13 +277,7 @@ export function Router({
     locationProp = parsePath(locationProp);
   }
 
-  let {
-    pathname = "/",
-    search = "",
-    hash = "",
-    state = null,
-    key = "default"
-  } = locationProp;
+  let { pathname, search, hash, state, key } = parseLocation(locationProp);
 
   let location = React.useMemo(() => {
     let trailingPathname = stripBasename(pathname, basename);
@@ -450,6 +444,27 @@ type ParamParseKey<Segment extends string> =
     ? ParamParseSegment<Segment>
     : string;
 
+/**
+ * Returns a complete Location with an absolute pathname
+ */
+export function parseLocation({
+  pathname = "/",
+  ...rest
+}: Partial<Location>): Location {
+  const defaultLocation = {
+    pathname: "/",
+    search: "",
+    hash: "",
+    state: null,
+    key: "default"
+  };
+  return {
+    ...defaultLocation,
+    ...rest,
+    pathname: normalizePathnameStart(pathname)
+  };
+}
+
 /**
  * Returns the current navigation action which describes how the router came to
  * the current location, either by a pop, push, or replace on the history stack.
@@ -599,7 +614,6 @@ export function useResolvedPath(to: To): Path {
   let routePathnamesJson = JSON.stringify(
     matches.map(match => match.pathnameBase)
   );
-
   return React.useMemo(
     () => resolveTo(to, JSON.parse(routePathnamesJson), locationPathname),
     [to, routePathnamesJson, locationPathname]
@@ -848,10 +862,11 @@ export function matchRoutes(
   locationArg: Partial<Location> | string,
   basename = "/"
 ): RouteMatch[] | null {
-  let location =
-    typeof locationArg === "string" ? parsePath(locationArg) : locationArg;
+  let absolutePathname = parseLocation(
+    typeof locationArg === "string" ? parsePath(locationArg) : locationArg
+  ).pathname;
 
-  let pathname = stripBasename(location.pathname || "/", basename);
+  let pathname = stripBasename(absolutePathname, basename);
 
   if (pathname == null) {
     return null;
@@ -1353,8 +1368,11 @@ function stripBasename(pathname: string, basename: string): string | null {
 const joinPaths = (paths: string[]): string =>
   paths.join("/").replace(/\/\/+/g, "/");
 
+const normalizePathnameStart = (pathname: string): string =>
+  pathname.replace(/^\/*/, "/");
+
 const normalizePathname = (pathname: string): string =>
-  pathname.replace(/\/+$/, "").replace(/^\/*/, "/");
+  normalizePathnameStart(pathname.replace(/\/+$/, ""));
 
 const normalizeSearch = (search: string): string =>
   !search || search === "?"

packages/react-router/package.json

@@ -17,7 +17,7 @@
     "react": ">=16.8"
   },
   "dependencies": {
-    "history": "^5.1.0"
+    "history-noslash": "^5.2.0-noslash.2.0"
   },
   "sideEffects": false,
   "keywords": [

yarn.lock

@@ -4469,10 +4469,10 @@ hermes-engine@^0.2.1:
   resolved "https://registry.npmjs.org/hermes-engine/-/hermes-engine-0.2.1.tgz"
   integrity sha512-eNHUQHuadDMJARpaqvlCZoK/Nitpj6oywq3vQ3wCwEsww5morX34mW5PmKWQTO7aU0ck0hgulxR+EVDlXygGxQ==
 
-history@^5.0.0:
-  version "5.0.2"
-  resolved "https://registry.npmjs.org/history/-/history-5.0.2.tgz"
-  integrity sha512-mBsCaXLUOD9x4YMQlyKHkHqFQlgG0ISle3edo6npJ1N2kb8lcGkmPUHpS4WjmrB64s5H70UniAxKmGDHJkstUQ==
+history-noslash@^5.2.0-noslash.2.0:
+  version "5.2.0-noslash.2.0"
+  resolved "https://registry.yarnpkg.com/history-noslash/-/history-noslash-5.2.0-noslash.2.0.tgz#52641d588bad50f470463a9ea727a896ebf6a57d"
+  integrity sha512-sabmZ4x3afCjkzhB8QXJVg4gmgPLAW7e2uPbbEJ1ogs7oASH2dtbAs5IZAP7zGqJTVve5PIfey6q0Kofi8Y7qA==
   dependencies:
     "@babel/runtime" "^7.7.6"