From e2217584a40098d6bfcd6a745e8e0d982e8936c0 Mon Sep 17 00:00:00 2001
From: simeng-li <simeng@silverhand.io>
Date: Mon, 16 May 2022 13:47:09 +0800
Subject: [PATCH] fix(ui): fix create account page reload issue (#832)

fix create account page reload issue
---
 packages/ui/src/components/TextLink/index.tsx | 12 +++++++++++-
 packages/ui/src/pages/SignIn/registry.tsx     |  2 +-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/TextLink/index.tsx b/packages/ui/src/components/TextLink/index.tsx
index 2c7d04f39..c006deed4 100644
--- a/packages/ui/src/components/TextLink/index.tsx
+++ b/packages/ui/src/components/TextLink/index.tsx
@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import React, { ReactNode, AnchorHTMLAttributes } from 'react';
 import { TFuncKey, useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
 
 import * as styles from './index.module.scss';
 
@@ -9,11 +10,20 @@ export type Props = AnchorHTMLAttributes<HTMLAnchorElement> & {
   children?: ReactNode;
   text?: TFuncKey<'translation', 'main_flow'>;
   type?: 'primary' | 'secondary';
+  to?: string;
 };
 
-const TextLink = ({ className, children, text, type = 'primary', ...rest }: Props) => {
+const TextLink = ({ className, children, text, type = 'primary', to, ...rest }: Props) => {
   const { t } = useTranslation(undefined, { keyPrefix: 'main_flow' });
 
+  if (to) {
+    return (
+      <Link className={classNames(styles.link, styles[type], className)} to={to}>
+        {children ?? (text ? t(text) : '')}
+      </Link>
+    );
+  }
+
   return (
     <a className={classNames(styles.link, styles[type], className)} {...rest} rel="noreferrer">
       {children ?? (text ? t(text) : '')}
diff --git a/packages/ui/src/pages/SignIn/registry.tsx b/packages/ui/src/pages/SignIn/registry.tsx
index bc5d24073..23d45d4ff 100644
--- a/packages/ui/src/pages/SignIn/registry.tsx
+++ b/packages/ui/src/pages/SignIn/registry.tsx
@@ -87,7 +87,7 @@ export const CreateAccountLink = ({
           <TextLink
             className={styles.createAccount}
             type="secondary"
-            href={`/register/${primarySignInMethod}`}
+            to={`/register/${primarySignInMethod}`}
             text="action.create_account"
           />
         </>