react-router-dom hooks

1 files changed, 15 insertions, 5 deletions

diff --git a/vnext/src/ui/Header.js b/vnext/src/ui/Header.js
index a7663dd3..d8fe23e0 100644
--- a/vnext/src/ui/Header.js
+++ b/vnext/src/ui/Header.js
@@ -1,11 +1,21 @@
-import React, { memo } from 'react';
-import { Link, withRouter } from 'react-router-dom';
+import React, { memo, useCallback } from 'react';
+import { Link, useHistory } from 'react-router-dom';
 
 import Icon from './Icon';
 import { UserLink } from './UserInfo';
 import SearchBox from './SearchBox';
 
-function Header({ visitor, search, className }) {
+function Header({ visitor, className }) {
+    const history = useHistory();
+    /**
+     * @param {string} searchString
+     */
+    let searchAll = useCallback((searchString) => {
+        let location = {};
+        location.pathname = '/discover';
+        location.search = `?search=${searchString}`;
+        history.push(location);
+    }, [history]);
     return (
         <div id="header" className={className}>
             <div id="header_wrapper">
@@ -27,7 +37,7 @@ function Header({ visitor, search, className }) {
                     visitor.uid >= 0 &&
                     <>
                         <div id="search" className="desktop">
-                            <SearchBox pathname="/discover" onSearch={search} />
+                            <SearchBox onSearch={searchAll} />
                         </div>
                         <nav id="global">
                             {visitor.uid > 0 ?
@@ -68,4 +78,4 @@ function Header({ visitor, search, className }) {
     );
 }
 
-export default memo(withRouter(Header));
+export default memo(Header);