Merge branch 'fix/link' into test

ui/src/components/AccordionNav/index.tsx

@@ -20,7 +20,7 @@
 import React, { FC, useEffect, useState } from 'react';
 import { Accordion, Nav } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
-import { useNavigate, useMatch } from 'react-router-dom';
+import { useNavigate, useMatch, NavLink } from 'react-router-dom';
 
 import classNames from 'classnames';
 
@@ -38,30 +38,54 @@ function MenuNode({
   const { t } = useTranslation('translation', { keyPrefix: 'nav_menus' });
   const isLeaf = !menu.children.length;
   const href = isLeaf ? `${path}${menu.path}` : '#';
-
   return (
     <Nav.Item key={menu.path} className="w-100">
-      <Nav.Link
-        eventKey={menu.path}
-        as={isLeaf ? 'a' : 'button'}
-        onClick={(evt) => {
-          callback(evt, menu, href, isLeaf);
-        }}
-        href={href}
-        className={classNames(
-          'text-nowrap d-flex flex-nowrap align-items-center w-100',
-          { expanding, 'link-dark': activeKey !== menu.path },
-        )}>
-        <span className="me-auto text-truncate">
-          {menu.displayName ? menu.displayName : t(menu.name)}
-        </span>
-        {menu.badgeContent ? (
-          <span className="badge text-bg-dark">{menu.badgeContent}</span>
-        ) : null}
-        {!isLeaf && (
-          <Icon className="collapse-indicator" name="chevron-right" />
-        )}
-      </Nav.Link>
+      {isLeaf ? (
+        <Nav.Link
+          eventKey={menu.path}
+          as={NavLink}
+          to={href}
+          onClick={(evt) => {
+            callback(evt, menu, href, isLeaf);
+          }}
+          className={classNames(
+            'text-nowrap d-flex flex-nowrap align-items-center w-100',
+            { expanding, 'link-dark': activeKey !== menu.path },
+          )}>
+          <span className="me-auto text-truncate">
+            {menu.displayName ? menu.displayName : t(menu.name)}
+          </span>
+          {menu.badgeContent ? (
+            <span className="badge text-bg-dark">{menu.badgeContent}</span>
+          ) : null}
+          {!isLeaf && (
+            <Icon className="collapse-indicator" name="chevron-right" />
+          )}
+        </Nav.Link>
+      ) : (
+        <Nav.Link
+          eventKey={menu.path}
+          as="button"
+          href={href}
+          onClick={(evt) => {
+            callback(evt, menu, href, isLeaf);
+          }}
+          className={classNames(
+            'text-nowrap d-flex flex-nowrap align-items-center w-100',
+            { expanding, 'link-dark': activeKey !== menu.path },
+          )}>
+          <span className="me-auto text-truncate">
+            {menu.displayName ? menu.displayName : t(menu.name)}
+          </span>
+          {menu.badgeContent ? (
+            <span className="badge text-bg-dark">{menu.badgeContent}</span>
+          ) : null}
+          {!isLeaf && (
+            <Icon className="collapse-indicator" name="chevron-right" />
+          )}
+        </Nav.Link>
+      )}
+
       {menu.children.length ? (
         <Accordion.Collapse eventKey={menu.path} className="ms-3">
           <>

ui/src/components/Header/components/NavItems/index.tsx

@@ -35,24 +35,25 @@ interface Props {
 
 const Index: FC<Props> = ({ redDot, userInfo, logOut }) => {
   const { t } = useTranslation();
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const navigate = useNavigate();
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { agent: ucAgent } = userCenterStore();
   const handleLinkClick = (evt) => {
     if (floppyNavigation.shouldProcessLinkClick(evt)) {
       evt.preventDefault();
       const href = evt.currentTarget.getAttribute('href');
-      navigate(href);
+      floppyNavigation.navigate(href, {
+        handler: navigate,
+      });
     }
   };
   return (
     <>
       <Nav className="flex-row">
-        <Nav.Link
-          as={NavLink}
+        <NavLink
           to="/users/notifications/inbox"
           title={t('inbox', { keyPrefix: 'notifications' })}
-          className="icon-link d-flex align-items-center justify-content-center p-0 me-3 position-relative">
+          className="icon-link nav-link d-flex align-items-center justify-content-center p-0 me-3 position-relative">
           <Icon name="bell-fill" className="fs-4" />
           {(redDot?.inbox || 0) > 0 && (
             <div className="unread-dot bg-danger">
@@ -61,13 +62,12 @@ const Index: FC<Props> = ({ redDot, userInfo, logOut }) => {
               </span>
             </div>
           )}
-        </Nav.Link>
+        </NavLink>
 
-        <Nav.Link
-          as={NavLink}
+        <NavLink
           to="/users/notifications/achievement"
           title={t('achievement', { keyPrefix: 'notifications' })}
-          className="icon-link d-flex align-items-center justify-content-center p-0 me-3 position-relative">
+          className="icon-link nav-link d-flex align-items-center justify-content-center p-0 me-3 position-relative">
           <Icon name="trophy-fill" className="fs-4" />
           {(redDot?.achievement || 0) > 0 && (
             <div className="unread-dot bg-danger">
@@ -76,7 +76,7 @@ const Index: FC<Props> = ({ redDot, userInfo, logOut }) => {
               </span>
             </div>
           )}
-        </Nav.Link>
+        </NavLink>
       </Nav>
 
       <Dropdown align="end">
@@ -95,25 +95,31 @@ const Index: FC<Props> = ({ redDot, userInfo, logOut }) => {
         </Dropdown.Toggle>
 
         <Dropdown.Menu>
-          <Dropdown.Item
-            href={`/users/${userInfo.username}`}
+          <NavLink
+            to={`/users/${userInfo.username}`}
+            className={() => 'dropdown-item'}
             onClick={handleLinkClick}>
             {t('header.nav.profile')}
-          </Dropdown.Item>
-          <Dropdown.Item
-            href={`/users/${userInfo.username}/bookmarks`}
+          </NavLink>
+          <NavLink
+            to={`/users/${userInfo.username}/bookmarks`}
+            className={() => 'dropdown-item'}
             onClick={handleLinkClick}>
             {t('header.nav.bookmark')}
-          </Dropdown.Item>
-          <Dropdown.Item
-            href="/users/settings/profile"
+          </NavLink>
+          <NavLink
+            to="/users/settings/profile"
+            className={() => 'dropdown-item'}
             onClick={handleLinkClick}>
             {t('header.nav.setting')}
-          </Dropdown.Item>
+          </NavLink>
           <Dropdown.Divider />
-          <Dropdown.Item href="/users/logout" onClick={(e) => logOut(e)}>
+          <NavLink
+            to="/users/logout"
+            className={() => 'dropdown-item'}
+            onClick={(e) => logOut(e)}>
             {t('header.nav.logout')}
-          </Dropdown.Item>
+          </NavLink>
         </Dropdown.Menu>
       </Dropdown>
       {/* Dropdown for user center agent info */}

ui/src/components/QueryGroup/index.tsx

@@ -24,6 +24,7 @@ import { useTranslation } from 'react-i18next';
 
 import classNames from 'classnames';
 
+import { REACT_BASE_PATH } from '@/router/alias';
 import { floppyNavigation } from '@/utils';
 
 interface Props {
@@ -82,7 +83,6 @@ const Index: FC<Props> = ({
         const name = typeof btn === 'string' ? btn : btn.name;
         return (
           <Button
-            as="a"
             key={key}
             variant="outline-secondary"
             active={currentSort === name}
@@ -102,7 +102,9 @@ const Index: FC<Props> = ({
                 : {}
             }
             href={
-              pathname ? `${pathname}${handleParams(key)}` : handleParams(key)
+              pathname
+                ? `${REACT_BASE_PATH}${pathname}${handleParams(key)}`
+                : handleParams(key)
             }
             onClick={(evt) => handleClick(evt, key)}>
             {t(name)}
@@ -131,7 +133,7 @@ const Index: FC<Props> = ({
                 )}
                 href={
                   pathname
-                    ? `${pathname}${handleParams(key)}`
+                    ? `${REACT_BASE_PATH}${pathname}${handleParams(key)}`
                     : handleParams(key)
                 }
                 onClick={(evt) => handleClick(evt, key)}>

ui/src/components/SideNav/index.tsx

@@ -19,7 +19,7 @@
 
 import { FC } from 'react';
 import { Col, Nav } from 'react-bootstrap';
-import { NavLink, useLocation, useNavigate } from 'react-router-dom';
+import { NavLink, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
 import classnames from 'classnames';
@@ -30,15 +30,10 @@ import './index.scss';
 
 const Index: FC = () => {
   const { t } = useTranslation();
-  const navigate = useNavigate();
   const { pathname } = useLocation();
   const { user: userInfo } = loggedUserInfoStore();
   const { visible, can_revision, revision } = sideNavStore();
 
-  const handleNavClick = (e, path) => {
-    e.preventDefault();
-    navigate(path);
-  };
   return (
     <Col
       xl={2}
@@ -60,13 +55,14 @@ const Index: FC = () => {
             <span>{t('header.nav.question')}</span>
           </NavLink>
 
-          <Nav.Link
-            href="/tags"
-            active={pathname === '/tags'}
-            onClick={(e) => handleNavClick(e, '/tags')}>
+          <NavLink
+            to="/tags"
+            className={() =>
+              pathname === '/tags' ? 'nav-link active' : 'nav-link'
+            }>
             <Icon name="tags-fill" className="me-2" />
             <span>{t('header.nav.tag')}</span>
-          </Nav.Link>
+          </NavLink>
 
           <NavLink to="/users" className="nav-link">
             <Icon name="people-fill" className="me-2" />