Merge branch 'bogdansoare-link-basename' into dev

Author: chaance

packages/react-router-dom/__tests__/link-href-test.tsx

@@ -119,4 +119,33 @@ describe("Link href", () => {
       expect(anchor.props.href).toEqual("/about");
     });
   });
+
+  describe("basename", () => {
+    it("is correct", () => {
+      function Home() {
+        return (
+          <div>
+            <h1>Home</h1>
+            <Link to="/about">About</Link>
+          </div>
+        );
+      }
+
+      let renderer: ReactTestRenderer;
+      act(() => {
+        renderer = createTestRenderer(
+          <Router initialEntries={["/app/home"]}>
+            <Routes basename="/app">
+              <Route path="home" element={<Home />} />
+            </Routes>
+          </Router>
+        );
+      });
+
+      let anchor = renderer.root.findByType("a");
+
+      expect(anchor).not.toBeNull();
+      expect(anchor.props.href).toEqual("/app/about");
+    });
+  });
 });

packages/react-router/index.tsx

@@ -86,13 +86,15 @@ const RouteContext = React.createContext<RouteContextObject>({
   outlet: null,
   params: readOnly<Params>({}),
   pathname: "",
+  basename: "",
   route: null
 });
 
 interface RouteContextObject {
   outlet: React.ReactElement | null;
   params: Params;
   pathname: string;
+  basename: string;
   route: RouteObject | null;
 }
 
@@ -414,7 +416,7 @@ export function useNavigate(): NavigateFunction {
   );
 
   let navigator = React.useContext(NavigatorContext);
-  let { pathname } = React.useContext(RouteContext);
+  let { pathname, basename } = React.useContext(RouteContext);
 
   let activeRef = React.useRef(false);
   React.useEffect(() => {
@@ -427,7 +429,7 @@ export function useNavigate(): NavigateFunction {
         if (typeof to === "number") {
           navigator.go(to);
         } else {
-          let path = resolvePath(to, pathname);
+          let path = resolvePath(to, pathname, basename);
           (!!options.replace ? navigator.replace : navigator.push)(
             path,
             options.state
@@ -441,7 +443,7 @@ export function useNavigate(): NavigateFunction {
         );
       }
     },
-    [navigator, pathname]
+    [basename, navigator, pathname]
   );
 
   return navigate;
@@ -473,8 +475,11 @@ export function useParams(): Params {
  * @see https://reactrouter.com/api/useResolvedPath
  */
 export function useResolvedPath(to: To): Path {
-  let { pathname } = React.useContext(RouteContext);
-  return React.useMemo(() => resolvePath(to, pathname), [to, pathname]);
+  let { pathname, basename } = React.useContext(RouteContext);
+  return React.useMemo(
+    () => resolvePath(to, pathname, basename),
+    [to, pathname, basename]
+  );
 }
 
 /**
@@ -561,6 +566,7 @@ function useRoutes_(
           outlet,
           params: readOnly<Params>({ ...parentParams, ...params }),
           pathname: joinPaths([basename, pathname]),
+          basename,
           route
         }}
       />
@@ -971,7 +977,7 @@ function safelyDecodeURIComponent(value: string, paramName: string) {
  *
  * @see https://reactrouter.com/api/resolvePath
  */
-export function resolvePath(to: To, fromPathname = "/"): Path {
+export function resolvePath(to: To, fromPathname = "/", basename = ""): Path {
   let {
     pathname: toPathname,
     search = "",
@@ -981,7 +987,11 @@ export function resolvePath(to: To, fromPathname = "/"): Path {
   let pathname = toPathname
     ? resolvePathname(
         toPathname,
-        toPathname.startsWith("/") ? "/" : fromPathname
+        toPathname.startsWith("/")
+          ? basename
+            ? normalizeSlashes(`/${basename}`)
+            : "/"
+          : fromPathname
       )
     : fromPathname;