fix: use router-based links to project manager

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

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 ?? [];
 
@@ -132,9 +131,9 @@ const ExternalAdapterSettings = (props: Props) => {
       <div key={'subtitle'} css={subtitle}>
         {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>