use URL module

packages/app/src/components/TagCloudBox.tsx

@@ -25,10 +25,13 @@ const TagCloudBox: FC<Props> = memo((props:(Props & typeof defaultProps)) => {
 
   const tagElements = tags.map((tag:IDataTagCount) => {
     const tagNameFormat = (tag.name).length > maxTagTextLength ? `${(tag.name).slice(0, maxTagTextLength)}...` : tag.name;
-    const queryParam = `tag:${tag.name}`;
+
+    const url = new URL('/_search', 'https://example.com');
+    url.searchParams.append('q', `tag:${tag.name}`);
+
     return (
       <Link
-        key={tag.name} href={`/_search?q=${encodeURIComponent(queryParam)}`}
+        key={tag.name} href={`${url.pathname}${url.search}`}
       >
         <a className="grw-tag-label badge badge-secondary mr-2">
           {tagNameFormat}

packages/app/src/components/TagList.tsx

@@ -33,12 +33,13 @@ const TagList: FC<TagListProps> = (props:(TagListProps & typeof defaultProps)) =
     return tagData.map((tag:IDataTagCount, index:number) => {
       const tagListClasses: string = index === 0 ? 'list-group-item d-flex' : 'list-group-item d-flex border-top-0';
 
-      const queryParam = `tag:${tag.name}`;
+      const url = new URL('/_search', 'https://example.com');
+      url.searchParams.append('q', `tag:${tag.name}`);
 
       return (
         <Link
           key={tag._id}
-          href={`/_search?q=${encodeURIComponent(queryParam)}`}
+          href={`${url.pathname}${url.search}`}
         >
           <a
             className={tagListClasses}