diff --git a/Composer/packages/client/__tests__/pages/botProjectsSettings/AdapterSettings.test.tsx b/Composer/packages/client/__tests__/pages/botProjectsSettings/AdapterSettings.test.tsx
index 5d9ee98620..e91d6792c9 100644
--- a/Composer/packages/client/__tests__/pages/botProjectsSettings/AdapterSettings.test.tsx
+++ b/Composer/packages/client/__tests__/pages/botProjectsSettings/AdapterSettings.test.tsx
@@ -87,7 +87,7 @@ describe('ExternalAdapterSettings', () => {
 
     const link = getByText(/from package manager/);
 
-    expect(link.attributes.getNamedItem('href')?.value).toEqual('plugin/package-manager/package-manager');
+    expect(link.attributes.getNamedItem('href')?.value).toContain('plugin/package-manager/package-manager');
   });
 
   it('brings up the modal', () => {
diff --git a/Composer/packages/client/src/pages/botProject/adapters/AdapterSection.tsx b/Composer/packages/client/src/pages/botProject/adapters/AdapterSection.tsx
index b2845ee773..4002f7fabf 100644
--- a/Composer/packages/client/src/pages/botProject/adapters/AdapterSection.tsx
+++ b/Composer/packages/client/src/pages/botProject/adapters/AdapterSection.tsx
@@ -6,9 +6,9 @@ import { useEffect, useRef } from 'react';
 import formatMessage from 'format-message';
 import { Stack } from 'office-ui-fabric-react/lib/Stack';
 import { Link } from 'office-ui-fabric-react/lib/Link';
+import { Link as RouterLink } from '@reach/router';
 
 import { title, subtitle, subtext } from '../styles';
-import { navigateTo } from '../../../utils/navigation';
 
 import ExternalAdapterSettings from './ExternalAdapterSettings';
 import ABSChannels from './ABSChannels';
@@ -54,14 +54,12 @@ const AdapterSection = ({ projectId, scrollToSectionId }: Props) => {
             'Find and install more external services to your bot project in <a>package manager</a>. For further guidance, see documentation for <a2>adding external connections.</a2>',
             {
               a: ({ children }) => (
-                <Link
+                <RouterLink
                   key="package-adapter-settings-page"
-                  onClick={() => {
-                    navigateTo(`/bot/${projectId}/plugin/package-manager/package-manager`);
-                  }}
+                  to={`/bot/${projectId}/plugin/package-manager/package-manager`}
                 >
                   {children}
-                </Link>
+                </RouterLink>
               ),
               a2: ({ children }) => (
                 <Link
diff --git a/Composer/packages/client/src/pages/botProject/adapters/ExternalAdapterSettings.tsx b/Composer/packages/client/src/pages/botProject/adapters/ExternalAdapterSettings.tsx
index 4d8c88423e..8da8d4ed86 100644
--- a/Composer/packages/client/src/pages/botProject/adapters/ExternalAdapterSettings.tsx
+++ b/Composer/packages/client/src/pages/botProject/adapters/ExternalAdapterSettings.tsx
@@ -8,11 +8,11 @@ import formatMessage from 'format-message';
 import { useRecoilValue } from 'recoil';
 import { BotSchemas, DialogSetting } from '@bfc/shared';
 import { Link } from 'office-ui-fabric-react/lib/Link';
+import { Link as RouterLink } from '@reach/router';
 import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
 import { JSONSchema7 } from '@botframework-composer/types';
 import { AdapterRecord } from '@botframework-composer/types/src';
 
-import { useRouterCache } from '../../../utils/hooks';
 import { schemasState, settingsState, dispatcherState } from '../../../recoilModel';
 import { subtitle, tableHeaderRow, tableRow, tableRowItem, tableColumnHeader, columnSizes } from '../styles';
 
@@ -35,7 +35,6 @@ const ExternalAdapterSettings = (props: Props) => {
   const schemas = useRecoilValue<BotSchemas>(schemasState(projectId));
   const currentSettings = useRecoilValue<DialogSetting>(settingsState(projectId));
   const { setSettings } = useRecoilValue(dispatcherState);
-  const packageManagerLink = useRouterCache('plugin/package-manager/package-manager');
 
   const adapters: AdapterRecord[] = currentSettings.runtimeSettings?.adapters ?? [];
 
@@ -130,11 +129,11 @@ const ExternalAdapterSettings = (props: Props) => {
     <Fragment>
       <div data-testid="adapterSettings">{externalServices(adapterSchemas)}</div>
       <div key={'subtitle'} css={subtitle}>
-        {formatMessage.rich('<a>Add from package manager</a>.', {
+        {formatMessage.rich('<a>Add from package manager</a>', {
           a: ({ children }) => (
-            <Link key="link" href={packageManagerLink}>
+            <RouterLink key="link" to={`/bot/${projectId}/plugin/package-manager/package-manager`}>
               {children}
-            </Link>
+            </RouterLink>
           ),
         })}
       </div>