[v6] Fix Link and navigate for absolute paths with basename

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

@@ -118,4 +118,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;
+      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

@@ -43,11 +43,7 @@ function warning(cond: boolean, message: string): void {
 }
 
 const alreadyWarned: Record<string, boolean> = {};
-function warningOnce(
-  key: string,
-  cond: boolean,
-  message: string
-) {
+function warningOnce(key: string, cond: boolean, message: string) {
   if (!cond && !alreadyWarned[key]) {
     alreadyWarned[key] = true;
     warning(false, message);
@@ -91,13 +87,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;
 }
 
@@ -490,7 +488,7 @@ export function useNavigate(): NavigateFunction {
 
   let locationContext = React.useContext(LocationContext);
   let navigator = locationContext.navigator as Navigator;
-  let { pathname } = React.useContext(RouteContext);
+  let { pathname, basename } = React.useContext(RouteContext);
 
   let activeRef = React.useRef(false);
   React.useEffect(() => {
@@ -503,7 +501,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
@@ -549,8 +547,12 @@ 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
+  ]);
 }
 
 /**
@@ -629,6 +631,7 @@ function useRoutes_(
           outlet,
           params: readOnly<Params>({ ...parentParams, ...params }),
           pathname: joinPaths([basename, pathname]),
+          basename,
           route
         }}
       />
@@ -1032,14 +1035,18 @@ 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 = '', hash = '' } =
     typeof to === 'string' ? parsePath(to) : to;
 
   let pathname = toPathname
     ? resolvePathname(
         toPathname,
-        toPathname.startsWith('/') ? '/' : fromPathname
+        toPathname.startsWith('/')
+          ? basename
+            ? `/${basename}`
+            : '/'
+          : fromPathname
       )
     : fromPathname;