fix: 🐛 link (#604)

use `Link` instead of `<a>` tag to prevent wrong link in this situation

www.xxx.com/answer/

Author: fyzhu

ui/src/pages/Search/components/SearchItem/index.tsx

@@ -18,6 +18,7 @@
  */
 
 import { memo, FC } from 'react';
+import { Link } from 'react-router-dom';
 import { ListGroupItem } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 
@@ -54,12 +55,12 @@ const Index: FC<Props> = ({ data }) => {
           style={{ marginTop: '2px' }}>
           {data.object_type === 'question' ? 'Q' : 'A'}
         </span>
-        <a className="h5 mb-0 link-dark text-break" href={itemUrl}>
+        <Link className="h5 mb-0 link-dark text-break" to={itemUrl}>
           {data.object.title}
           {data.object.status === 'closed'
             ? ` [${t('closed', { keyPrefix: 'question' })}]`
             : null}
-        </a>
+        </Link>
       </div>
       <div className="d-flex flex-wrap align-items-center small text-secondary mb-2">
         <BaseUserCard data={data.object?.user_info} showAvatar={false} />

ui/src/pages/Users/Personal/components/Answers/index.tsx

@@ -20,6 +20,7 @@
 import { FC, memo } from 'react';
 import { ListGroup, ListGroupItem } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
 
 import { FormatTime, Tag, Counts } from '@/components';
 import { pathFactory } from '@/router/pathFactory';
@@ -41,15 +42,15 @@ const Index: FC<Props> = ({ visible, data }) => {
             className="py-3 px-0 bg-transparent border-start-0 border-end-0"
             key={item.answer_id}>
             <h6 className="mb-2">
-              <a
-                href={pathFactory.answerLanding({
+              <Link
+                to={pathFactory.answerLanding({
                   questionId: item.question_id,
                   slugTitle: item.question_info?.url_title,
                   answerId: item.answer_id,
                 })}
                 className="text-break">
                 {item.question_info?.title}
-              </a>
+              </Link>
             </h6>
             <div className="d-flex align-items-center small text-secondary mb-2">
               <FormatTime

ui/src/pages/Users/Personal/components/Comments/index.tsx

@@ -19,6 +19,7 @@
 
 import { FC, memo } from 'react';
 import { ListGroup, ListGroupItem } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
 
 import { pathFactory } from '@/router/pathFactory';
 import { FormatTime } from '@/components';
@@ -39,9 +40,9 @@ const Index: FC<Props> = ({ visible, data }) => {
           <ListGroupItem
             className="py-3 px-0 bg-transparent border-start-0 border-end-0"
             key={item.comment_id}>
-            <a
+            <Link
               className="text-break"
-              href={
+              to={
                 item.object_type === 'question'
                   ? pathFactory.questionLanding(
                       item.question_id,
@@ -54,7 +55,7 @@ const Index: FC<Props> = ({ visible, data }) => {
                     })
               }>
               {item.title}
-            </a>
+            </Link>
             <div
               className="small mb-2 last-p text-break text-truncate-2"
               dangerouslySetInnerHTML={{

ui/src/pages/Users/Personal/components/DefaultList/index.tsx

@@ -20,6 +20,7 @@
 import { FC, memo } from 'react';
 import { ListGroup, ListGroupItem } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
 
 import { FormatTime, Tag, BaseUserCard, Counts } from '@/components';
 import { pathFactory } from '@/router/pathFactory';
@@ -44,17 +45,17 @@ const Index: FC<Props> = ({ visible, tabName, data }) => {
             className="py-3 px-0 bg-transparent border-start-0 border-end-0"
             key={tabName === 'questions' ? item.question_id : item.id}>
             <h6 className="mb-2">
-              <a
+              <Link
                 className="text-break"
-                href={pathFactory.questionLanding(
+                to={pathFactory.questionLanding(
                   tabName === 'questions' ? item.question_id : item.id,
                   item.url_title,
                 )}>
                 {item.title}
                 {tabName === 'questions' && item.status === 'closed'
                   ? ` [${t('closed', { keyPrefix: 'question' })}]`
                   : null}
-              </a>
+              </Link>
             </h6>
             <div className="d-flex flex-wrap align-items-center small text-secondary mb-2">
               {tabName === 'bookmarks' && (

ui/src/pages/Users/Personal/components/Reputation/index.tsx

@@ -19,6 +19,7 @@
 
 import { FC, memo } from 'react';
 import { ListGroup, ListGroupItem } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
 
 import { FormatTime } from '@/components';
 import { pathFactory } from '@/router/pathFactory';
@@ -48,9 +49,9 @@ const Index: FC<Props> = ({ visible, data }) => {
               {item.reputation}
             </div>
             <div>
-              <a
+              <Link
                 className="text-break"
-                href={
+                to={
                   item.object_type === 'question'
                     ? pathFactory.questionLanding(
                         item.question_id,
@@ -63,7 +64,7 @@ const Index: FC<Props> = ({ visible, data }) => {
                       })
                 }>
                 {item.title}
-              </a>
+              </Link>
               <div className="d-flex align-items-center small text-secondary">
                 <span>{item.rank_type}</span>
                 <span className="split-dot" />

ui/src/pages/Users/Personal/components/TopList/index.tsx

@@ -19,6 +19,7 @@
 
 import { FC, memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
 
 import { pathFactory } from '@/router/pathFactory';
 import { Icon } from '@/components';
@@ -36,9 +37,9 @@ const Index: FC<Props> = ({ data, type }) => {
           <li
             className="mb-2"
             key={type === 'answer' ? item.answer_id : item.question_id}>
-            <a
+            <Link
               className="me-3"
-              href={
+              to={
                 type === 'answer'
                   ? pathFactory.answerLanding({
                       questionId: item.question_id,
@@ -51,7 +52,7 @@ const Index: FC<Props> = ({ data, type }) => {
                     )
               }>
               {type === 'answer' ? item.question_info.title : item.title}
-            </a>
+            </Link>
 
             <div className="d-inline-block text-secondary me-3 small">
               <Icon name="hand-thumbs-up-fill me-1" />

ui/src/pages/Users/Personal/components/Votes/index.tsx

@@ -19,6 +19,7 @@
 
 import { FC, memo } from 'react';
 import { ListGroup, ListGroupItem } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
 
 import { pathFactory } from '@/router/pathFactory';
 import { FormatTime } from '@/components';
@@ -46,9 +47,9 @@ const Index: FC<Props> = ({ visible, data }) => {
               {item.vote_type}
             </div>
             <div>
-              <a
+              <Link
                 className="text-break"
-                href={
+                to={
                   item.object_type === 'question'
                     ? pathFactory.questionLanding(
                         item.question_id,
@@ -61,7 +62,7 @@ const Index: FC<Props> = ({ visible, data }) => {
                       })
                 }>
                 {item.title}
-              </a>
+              </Link>
               <div className="d-flex align-items-center small text-secondary">
                 <span>{item.object_type}</span>