docs: use router.push for algolia search (#31024)

* docs: use router.push for algolia search

close #30812
ref #30942

* fix tsc error

site/theme/template/Layout/Header/SearchBar.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { Link, browserHistory } from 'bisheng/router';
+import { Link } from 'bisheng/router';
 import classNames from 'classnames';
 import { Helmet } from 'react-helmet-async';
 import canUseDom from 'rc-util/lib/Dom/canUseDom';
@@ -8,7 +8,6 @@ import { Input, Tooltip, Typography } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
 import { DocSearchProps, useDocSearchKeyboardEvents, DocSearchModalProps } from '@docsearch/react';
 import '@docsearch/css';
-
 import { SharedProps } from './interface';
 import { IAlgoliaConfig, transformHitUrl } from './algolia-config';
 
@@ -20,6 +19,7 @@ export interface SearchBarProps extends SharedProps {
   onTriggerFocus?: (focus: boolean) => void;
   responsive: null | 'narrow' | 'crowded';
   algoliaConfig: IAlgoliaConfig;
+  router: any;
 }
 
 let SearchModal: React.FC<DocSearchModalProps> | null = null;
@@ -42,11 +42,12 @@ function isAppleDevice() {
  * - [@docusaurus-theme-search-algolia](https://docusaurus.io/docs/api/themes/@docusaurus/theme-search-algolia)
  * - [DocSearchModal Docs](https://autocomplete-experimental.netlify.app/docs/DocSearchModal)
  */
-export const SearchBar = ({
+const SearchBar = ({
   isZhCN,
   responsive,
   onTriggerFocus,
   algoliaConfig,
+  router,
 }: SearchBarProps) => {
   const [isInputFocus, setInputFocus] = React.useState(false);
   const [inputSearch, setInputSearch] = React.useState('');
@@ -114,9 +115,7 @@ export const SearchBar = ({
 
   const navigator = React.useRef({
     navigate({ itemUrl }: { itemUrl: string }) {
-      browserHistory.push(itemUrl);
-      // should use history from bisheng and remove this `reload` calls
-      window.location.reload(false);
+      router.push(itemUrl);
     },
   }).current;
 
@@ -196,3 +195,5 @@ export const SearchBar = ({
     </div>
   );
 };
+
+export default SearchBar;

site/theme/template/Layout/Header/index.tsx

@@ -4,12 +4,10 @@ import classNames from 'classnames';
 import { UnorderedListOutlined } from '@ant-design/icons';
 import { Select, Row, Col, Popover, Button } from 'antd';
 import canUseDom from 'rc-util/lib/Dom/canUseDom';
-// import { browserHistory } from 'bisheng/router';
-
 import * as utils from '../../utils';
 import packageJson from '../../../../../package.json';
 import Logo from './Logo';
-import { SearchBar } from './SearchBar';
+import SearchBar from './SearchBar';
 import More from './More';
 import Navigation from './Navigation';
 import Github from './Github';
@@ -47,7 +45,7 @@ const triggerDocSearchImport = () => {
   });
 };
 
-function initDocSearch(isZhCN: boolean) {
+function initDocSearch({ isZhCN, router }: { isZhCN: boolean; router: any }) {
   if (!canUseDom()) {
     return;
   }
@@ -62,14 +60,12 @@ function initDocSearch(isZhCN: boolean) {
       transformData: AlgoliaConfig.transformData,
       debug: AlgoliaConfig.debug,
       // https://docsearch.algolia.com/docs/behavior#handleselected
-      // handleSelected: (input, _$1, suggestion, _$2, context) => {
-      // doesn't refresh
-      //   // Prevents the default behavior on click
-      //   if (context.selectionMethod === 'click') {
-      //     input.setVal('');
-      //     browserHistory.push(suggestion.url);
-      //   }
-      // },
+      handleSelected: (input: any, _$1: unknown, suggestion: any) => {
+        router.push(suggestion.url);
+        setTimeout(() => {
+          input.setVal('');
+        });
+      },
     });
   });
 }
@@ -97,7 +93,10 @@ class Header extends React.Component<HeaderProps, HeaderState> {
     const { intl, router } = this.props;
     router.listen(this.handleHideMenu);
 
-    initDocSearch(intl.locale === 'zh');
+    initDocSearch({
+      isZhCN: intl.locale === 'zh',
+      router,
+    });
 
     window.addEventListener('resize', this.onWindowResize);
     this.onWindowResize();
@@ -216,6 +215,7 @@ class Header extends React.Component<HeaderProps, HeaderState> {
             location,
             themeConfig,
             intl: { locale },
+            router,
           } = this.props;
           const docVersions: Record<string, string> = {
             [antdVersion]: antdVersion,
@@ -348,6 +348,7 @@ class Header extends React.Component<HeaderProps, HeaderState> {
                   <SearchBar
                     key="search"
                     {...sharedProps}
+                    router={router}
                     algoliaConfig={AlgoliaConfig}
                     responsive={responsive}
                     onTriggerFocus={this.onTriggerSearching}