diff --git a/frontend/src/pages/sys-admin/admin-logs/login-logs.js b/frontend/src/pages/sys-admin/admin-logs/login-logs.js
index edd7a0d376..836686fe7d 100644
--- a/frontend/src/pages/sys-admin/admin-logs/login-logs.js
+++ b/frontend/src/pages/sys-admin/admin-logs/login-logs.js
@@ -8,6 +8,7 @@ import Loading from '../../../components/loading';
 import Paginator from '../../../components/paginator';
 import LogsNav from './logs-nav';
 import MainPanelTopbar from '../main-panel-topbar';
+import UserLink from '../user-link';
 
 
 class Content extends Component {
@@ -84,7 +85,7 @@ class Item extends Component {
     let { item } = this.props;
     return (
       <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
-        <td><a href={siteRoot + 'useradmin/info/' + item.email + '/'}>{item.name}</a></td>
+        <td><UserLink email={item.email} name={item.name} /></td>
         <td>{item.login_ip}</td>
         <td>{item.login_success ? gettext('Success') : gettext('Failed')}</td>
         <td>{moment(item.login_time).fromNow()}</td>
diff --git a/frontend/src/pages/sys-admin/admin-logs/operation-logs.js b/frontend/src/pages/sys-admin/admin-logs/operation-logs.js
index 20f6d8b699..1f0d5b3ffc 100644
--- a/frontend/src/pages/sys-admin/admin-logs/operation-logs.js
+++ b/frontend/src/pages/sys-admin/admin-logs/operation-logs.js
@@ -8,7 +8,7 @@ import Loading from '../../../components/loading';
 import Paginator from '../../../components/paginator';
 import LogsNav from './logs-nav';
 import MainPanelTopbar from '../main-panel-topbar';
-
+import UserLink from '../user-link';
 
 class Content extends Component {
 
@@ -180,7 +180,7 @@ class Item extends Component {
     let { item } = this.props;
     return (
       <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
-        <td><a href={siteRoot + 'useradmin/info/' + item.email + '/'}>{item.name}</a></td>
+        <td><UserLink email={item.email} name={item.name} /></td>
         <td>{this.getOperationText(item.operation)}</td>
         <td>
           <span dangerouslySetInnerHTML={{__html: this.getOperationDetail(item)}}></span>
diff --git a/frontend/src/pages/sys-admin/departments/member-item.js b/frontend/src/pages/sys-admin/departments/member-item.js
index b9f3a04882..7aa4e523d8 100644
--- a/frontend/src/pages/sys-admin/departments/member-item.js
+++ b/frontend/src/pages/sys-admin/departments/member-item.js
@@ -4,7 +4,7 @@ import { seafileAPI } from '../../../utils/seafile-api';
 import { Utils } from '../../../utils/utils.js';
 import toaster from '../../../components/toast';
 import RoleEditor from '../../../components/select-editor/role-editor';
-import { serviceURL } from '../../../utils/constants';
+import UserLink from '../user-link';
 
 const MemberItemPropTypes = {
   groupID: PropTypes.string.isRequired,
@@ -49,19 +49,18 @@ class MemberItem extends React.Component {
       toaster.danger(errMessage);
     });
     this.setState({
-      highlight: false,
+      highlight: false
     });
   }
 
   render() {
     const member = this.props.member;
     const highlight = this.state.highlight;
-    let memberLink = serviceURL + '/useradmin/info/' + member.email + '/';
     if (member.role === 'Owner') return null;
     return (
       <tr className={highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
         <td><img src={member.avatar_url} alt="member-header" width="24" className="avatar"/></td>
-        <td><a href={memberLink}>{member.name}</a></td>
+        <td><UserLink email={member.email} name={member.name} /></td>
         <td>
           <RoleEditor
             isTextMode={true}
@@ -84,4 +83,4 @@ class MemberItem extends React.Component {
 
 MemberItem.propTypes = MemberItemPropTypes;
 
-export default MemberItem;
\ No newline at end of file
+export default MemberItem;
diff --git a/frontend/src/pages/sys-admin/devices/devices-errors.js b/frontend/src/pages/sys-admin/devices/devices-errors.js
index e28f88da29..abe4992310 100644
--- a/frontend/src/pages/sys-admin/devices/devices-errors.js
+++ b/frontend/src/pages/sys-admin/devices/devices-errors.js
@@ -10,6 +10,7 @@ import Loading from '../../../components/loading';
 import { Link } from '@reach/router';
 import DevicesNav from './devices-nav';
 import MainPanelTopbar from '../main-panel-topbar';
+import UserLink from '../user-link';
 
 class Content extends Component {
 
@@ -76,7 +77,7 @@ class Item extends Component {
     let item = this.props.item;
     return (
       <tr onMouseEnter={this.handleMouseOver} onMouseLeave={this.handleMouseOut}>
-        <td><Link to={`${siteRoot}useradmin/info/${encodeURIComponent(item.email)}/`}>{item.name}</Link></td>
+        <td><UserLink email={item.email} name={item.name} /></td>
         <td>{item.device_name}{' / '}{item.client_version}</td>
         <td>{item.device_ip}</td>
         <td><Link to={`${siteRoot}sysadmin/#libs/${item.repo_id}`}>{item.repo_name}</Link></td>
diff --git a/frontend/src/pages/sys-admin/groups/group-members.js b/frontend/src/pages/sys-admin/groups/group-members.js
index 3d2060199e..575e294a9e 100644
--- a/frontend/src/pages/sys-admin/groups/group-members.js
+++ b/frontend/src/pages/sys-admin/groups/group-members.js
@@ -10,6 +10,7 @@ import CommonOperationConfirmationDialog from '../../../components/dialog/common
 import SysAdminGroupAddMemberDialog from '../../../components/dialog/sysadmin-dialog/sysadmin-group-add-member-dialog';
 import SysAdminGroupRoleEditor from '../../../components/select-editor/sysadmin-group-role-editor';
 import MainPanelTopbar from '../main-panel-topbar';
+import UserLink from '../user-link';
 import GroupNav from './group-nav';
 
 class Content extends Component {
@@ -105,7 +106,7 @@ class Item extends Component {
       <Fragment>
         <tr onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
           <td><img src={item.avatar_url} alt="" className="rounded-circle" width="24" /></td>
-          <td><a href={`${siteRoot}useradmin/info/${encodeURIComponent(item.email)}/`}>{item.name}</a></td>
+          <td><UserLink email={item.email} name={item.name} /></td>
           <td>
             {item.role == 'Owner' ?
               gettext('Owner') :
diff --git a/frontend/src/pages/sys-admin/groups/group-repos.js b/frontend/src/pages/sys-admin/groups/group-repos.js
index 8ecf9aa592..c419bdfdb3 100644
--- a/frontend/src/pages/sys-admin/groups/group-repos.js
+++ b/frontend/src/pages/sys-admin/groups/group-repos.js
@@ -7,6 +7,7 @@ import EmptyTip from '../../../components/empty-tip';
 import Loading from '../../../components/loading';
 import CommonOperationConfirmationDialog from '../../../components/dialog/common-operation-confirmation-dialog';
 import MainPanelTopbar from '../main-panel-topbar';
+import UserLink from '../user-link';
 import GroupNav from './group-nav';
 
 const { enableSysAdminViewRepo } = window.sysadmin.pageOptions;
@@ -121,7 +122,7 @@ class Item extends Component {
           <td>{this.renderRepoName()}</td>
           <td>{Utils.bytesToSize(item.size)}</td>
           <td>
-            <a href={`${siteRoot}useradmin/info/${encodeURIComponent(item.shared_by)}/`}>{item.shared_by_name}</a>
+            <UserLink email={item.shared_by} name={item.shared_by_name} />
           </td>
           <td>
             <a href="#" className={`action-icon sf2-icon-x3 ${isOpIconShown ? '' : 'invisible'}`} title={gettext('Unshare')} onClick={this.toggleUnshareRepoDialog}></a>
diff --git a/frontend/src/pages/sys-admin/groups/groups.js b/frontend/src/pages/sys-admin/groups/groups.js
index 70ff63a834..d8d7856634 100644
--- a/frontend/src/pages/sys-admin/groups/groups.js
+++ b/frontend/src/pages/sys-admin/groups/groups.js
@@ -13,6 +13,7 @@ import CommonOperationConfirmationDialog from '../../../components/dialog/common
 import SysAdminCreateGroupDialog from '../../../components/dialog/sysadmin-dialog/sysadmin-create-group-dialog';
 import SysAdminTransferGroupDialog from '../../../components/dialog/sysadmin-dialog/sysadmin-group-transfer-dialog';
 import MainPanelTopbar from '../main-panel-topbar';
+import UserLink from '../user-link';
 import OpMenu from './op-menu';
 
 class Content extends Component {
@@ -182,7 +183,7 @@ class Item extends Component {
           <td>
             {item.owner == 'system admin' ?
               '--' :
-              <Link to={`${siteRoot}sys/users/${encodeURIComponent(item.owner)}/`}>{item.owner_name}</Link>
+              <UserLink email={item.owner} name={item.owner_name} />
             }
           </td>
           <td>
diff --git a/frontend/src/pages/sys-admin/institutions/institution-admins.js b/frontend/src/pages/sys-admin/institutions/institution-admins.js
index d9e11a3446..089e932e8e 100644
--- a/frontend/src/pages/sys-admin/institutions/institution-admins.js
+++ b/frontend/src/pages/sys-admin/institutions/institution-admins.js
@@ -2,11 +2,12 @@ import React, { Component, Fragment } from 'react';
 import moment from 'moment';
 import { Utils } from '../../../utils/utils';
 import { seafileAPI } from '../../../utils/seafile-api';
-import { siteRoot, loginUrl, gettext } from '../../../utils/constants';
+import { loginUrl, gettext } from '../../../utils/constants';
 import toaster from '../../../components/toast';
 import EmptyTip from '../../../components/empty-tip';
 import Loading from '../../../components/loading';
 import CommonOperationConfirmationDialog from '../../../components/dialog/common-operation-confirmation-dialog';
+import UserLink from '../user-link';
 import MainPanelTopbar from '../main-panel-topbar';
 import InstitutionNav from './institution-nav';
 import OpMenu from './user-op-menu';
@@ -142,7 +143,9 @@ class Item extends Component {
     return (
       <Fragment>
         <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
-          <td><a href={`${siteRoot}useradmin/info/${encodeURIComponent(item.email)}/`}>{item.name}</a></td>
+          <td>
+            <UserLink email={item.email} name={item.name} />
+          </td>
           <td>
             {item.is_active ? gettext('Active') : gettext('Inactive')}
           </td>
@@ -224,7 +227,7 @@ class InstitutionAdmins extends Component {
   revokeAdmin = (email) => {
     seafileAPI.sysAdminUpdateInstitutionUser(this.props.institutionID, email, false).then(res => {
       let userList = this.state.userList.filter(user => {
-        return user.email != email
+        return user.email != email;
       });
       this.setState({userList: userList});
       toaster.success(gettext('Success'));
diff --git a/frontend/src/pages/sys-admin/institutions/institution-users.js b/frontend/src/pages/sys-admin/institutions/institution-users.js
index 0c542ea109..86b5ad6bf5 100644
--- a/frontend/src/pages/sys-admin/institutions/institution-users.js
+++ b/frontend/src/pages/sys-admin/institutions/institution-users.js
@@ -3,15 +3,16 @@ import { Button } from 'reactstrap';
 import moment from 'moment';
 import { Utils } from '../../../utils/utils';
 import { seafileAPI } from '../../../utils/seafile-api';
-import { siteRoot, loginUrl, gettext } from '../../../utils/constants';
+import { loginUrl, gettext } from '../../../utils/constants';
 import toaster from '../../../components/toast';
 import EmptyTip from '../../../components/empty-tip';
 import Loading from '../../../components/loading';
+import Paginator from '../../../components/paginator';
 import AddMemberDialog from '../../../components/dialog/sysadmin-dialog/sysadmin-add-institution-member-dialog';
 import CommonOperationConfirmationDialog from '../../../components/dialog/common-operation-confirmation-dialog';
+import UserLink from '../user-link';
 import MainPanelTopbar from '../main-panel-topbar';
 import InstitutionNav from './institution-nav';
-import Paginator from '../../../components/paginator';
 import OpMenu from './user-op-menu';
 
 class Content extends Component {
@@ -175,7 +176,9 @@ class Item extends Component {
     return (
       <Fragment>
         <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
-          <td><a href={`${siteRoot}useradmin/info/${encodeURIComponent(item.email)}/`}>{item.name}</a></td>
+          <td>
+            <UserLink email={item.email} name={item.name} />
+          </td>
           <td>
             {item.is_active ? gettext('Active') : gettext('Inactive')}
           </td>
diff --git a/frontend/src/pages/sys-admin/invitations/invitations.js b/frontend/src/pages/sys-admin/invitations/invitations.js
index 562228af8b..1b4c49c4fb 100644
--- a/frontend/src/pages/sys-admin/invitations/invitations.js
+++ b/frontend/src/pages/sys-admin/invitations/invitations.js
@@ -10,6 +10,7 @@ import EmptyTip from '../../../components/empty-tip';
 import Loading from '../../../components/loading';
 import Paginator from '../../../components/paginator';
 import MainPanelTopbar from '../main-panel-topbar';
+import UserLink from '../user-link';
 import OpMenu from './op-menu';
 
 class Content extends Component {
@@ -174,11 +175,11 @@ class Item extends Component {
       <Fragment>
         <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
           <td>
-            <Link to={`${siteRoot}sys/users/${encodeURIComponent(item.inviter_email)}/`}>{item.inviter_name}</Link>
+            <UserLink email={item.inviter_email} name={item.inviter_name} />
           </td>
           <td>
             {item.accept_time ?
-              <Link to={`${siteRoot}sys/users/${encodeURIComponent(item.accepter_email)}/`}>{item.accepter_name}</Link> :
+              <UserLink email={item.accepter_email} name={item.accepter_name} /> :
               item.accepter_email
             }
           </td>
diff --git a/frontend/src/pages/sys-admin/links/share-links.js b/frontend/src/pages/sys-admin/links/share-links.js
index 366fbcdb07..04f556f529 100644
--- a/frontend/src/pages/sys-admin/links/share-links.js
+++ b/frontend/src/pages/sys-admin/links/share-links.js
@@ -9,7 +9,7 @@ import Loading from '../../../components/loading';
 import Paginator from '../../../components/paginator';
 import LinksNav from './links-nav';
 import MainPanelTopbar from '../main-panel-topbar';
-
+import UserLink from '../user-link';
 
 class Content extends Component {
 
@@ -111,7 +111,7 @@ class Item extends Component {
       <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
         <td>{item.obj_name}</td>
         <td>{item.token}</td>
-        <td><a href={siteRoot + 'useradmin/info/' + item.creator_email + '/'}>{item.creator_name}</a></td>
+        <td><UserLink email={item.creator_email} name={item.creator_name} /></td>
         <td>{moment(item.ctime).fromNow()}</td>
         <td>{item.view_cnt}</td>
         <td>
diff --git a/frontend/src/pages/sys-admin/links/upload-links.js b/frontend/src/pages/sys-admin/links/upload-links.js
index 18c092ba71..de8a55889c 100644
--- a/frontend/src/pages/sys-admin/links/upload-links.js
+++ b/frontend/src/pages/sys-admin/links/upload-links.js
@@ -9,6 +9,7 @@ import Loading from '../../../components/loading';
 import Paginator from '../../../components/paginator';
 import LinksNav from './links-nav';
 import MainPanelTopbar from '../main-panel-topbar';
+import UserLink from '../user-link';
 
 
 class Content extends Component {
@@ -112,7 +113,7 @@ class Item extends Component {
         <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
           <td>{item.path}</td>
           <td>{item.token}</td>
-          <td><a href={siteRoot + 'useradmin/info/' + item.creator_email + '/'}>{item.creator_name}</a></td>
+          <td><UserLink email={item.creator_email} name={item.creator_name} /></td>
           <td>{moment(item.ctime).fromNow()}</td>
           <td>{item.view_cnt}</td>
           <td>
diff --git a/frontend/src/pages/sys-admin/logs-page/file-access-logs.js b/frontend/src/pages/sys-admin/logs-page/file-access-logs.js
index 51202131c8..36c730fa45 100644
--- a/frontend/src/pages/sys-admin/logs-page/file-access-logs.js
+++ b/frontend/src/pages/sys-admin/logs-page/file-access-logs.js
@@ -8,6 +8,7 @@ import Loading from '../../../components/loading';
 import Paginator from '../../../components/paginator';
 import LogsNav from './logs-nav';
 import MainPanelTopbar from '../main-panel-topbar';
+import UserLink from '../user-link';
 import LogsExportExcelDialog from '../../../components/dialog/sysadmin-dialog/sysadmin-logs-export-excel-dialog';
 import ModalPortal from '../../../components/modal-portal';
 
@@ -103,7 +104,7 @@ class Item extends Component {
     let { item } = this.props;
     return (
       <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
-        <td><a href={siteRoot + 'useradmin/info/' + item.email + '/'}>{item.name}</a></td>
+        <td><UserLink email={item.email} name={item.name} /></td>
         <td>{item.event_type}</td>
         <td>{item.ip}{' / '}{item.device}</td>
         <td>{moment(item.time).fromNow()}</td>
diff --git a/frontend/src/pages/sys-admin/logs-page/file-update-logs.js b/frontend/src/pages/sys-admin/logs-page/file-update-logs.js
index 7e112b2081..42e5a1f872 100644
--- a/frontend/src/pages/sys-admin/logs-page/file-update-logs.js
+++ b/frontend/src/pages/sys-admin/logs-page/file-update-logs.js
@@ -8,6 +8,7 @@ import Paginator from '../../../components/paginator';
 import LogsNav from './logs-nav';
 import { Button } from 'reactstrap';
 import MainPanelTopbar from '../main-panel-topbar';
+import UserLink from '../user-link';
 import ModalPortal from '../../../components/modal-portal';
 import CommitDetails from '../../../components/dialog/commit-details';
 import LogsExportExcelDialog from '../../../components/dialog/sysadmin-dialog/sysadmin-logs-export-excel-dialog';
@@ -117,7 +118,7 @@ class Item extends Component {
     return (
       <Fragment>
         <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
-          <td><a href={siteRoot + 'useradmin/info/' + item.email + '/'}>{item.name}</a></td>
+          <td><UserLink email={item.email} name={item.name} /></td>
           <td>{moment(item.time).fromNow()}</td>
           <td>{item.repo_name ? item.repo_name : gettext('Deleted')}</td>
           <td>
diff --git a/frontend/src/pages/sys-admin/logs-page/login-logs.js b/frontend/src/pages/sys-admin/logs-page/login-logs.js
index 671d76ae22..d7422c73ac 100644
--- a/frontend/src/pages/sys-admin/logs-page/login-logs.js
+++ b/frontend/src/pages/sys-admin/logs-page/login-logs.js
@@ -9,6 +9,7 @@ import Loading from '../../../components/loading';
 import Paginator from '../../../components/paginator';
 import LogsNav from './logs-nav';
 import MainPanelTopbar from '../main-panel-topbar';
+import UserLink from '../user-link';
 import LogsExportExcelDialog from '../../../components/dialog/sysadmin-dialog/sysadmin-logs-export-excel-dialog';
 import ModalPortal from '../../../components/modal-portal';
 
@@ -102,7 +103,7 @@ class Item extends Component {
     let { item } = this.props;
     return (
       <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
-        <td><a href={siteRoot + 'useradmin/info/' + item.email + '/'}>{item.name}</a></td>
+        <td><UserLink email={item.email} name={item.name} /></td>
         <td>{item.login_ip}</td>
         <td>{item.log_success ? gettext('Success') : gettext('Failed')}</td>
         <td>{moment(item.login_time).fromNow()}</td>
diff --git a/frontend/src/pages/sys-admin/logs-page/share-permission-logs.js b/frontend/src/pages/sys-admin/logs-page/share-permission-logs.js
index 602bfe1d9d..ca54143879 100644
--- a/frontend/src/pages/sys-admin/logs-page/share-permission-logs.js
+++ b/frontend/src/pages/sys-admin/logs-page/share-permission-logs.js
@@ -9,6 +9,7 @@ import Loading from '../../../components/loading';
 import Paginator from '../../../components/paginator';
 import LogsNav from './logs-nav';
 import MainPanelTopbar from '../main-panel-topbar';
+import UserLink from '../user-link';
 import LogsExportExcelDialog from '../../../components/dialog/sysadmin-dialog/sysadmin-logs-export-excel-dialog';
 import ModalPortal from '../../../components/modal-portal';
 
@@ -116,8 +117,8 @@ class Item extends Component {
     let { item } = this.props;
     return (
       <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
-        <td><a href={siteRoot + 'useradmin/info/' + item.from_user_email + '/'}>{item.from_user_name}</a></td>
-        <td><a href={siteRoot + 'useradmin/info/' + item.to_user_email + '/'}>{item.to_user_name}</a></td>
+        <td><UserLink email={item.from_user_email} name={item.from_user_name} /></td>
+        <td><UserLink email={item.to_user_email} name={item.to_user_name} /></td>
         <td>{this.getActionTextByEType(item.etype)}</td>
         <td>{Utils.sharePerms(item.permission)}</td>
         <td>{item.repo_name ? item.repo_name : gettext('Deleted')}</td>
diff --git a/frontend/src/pages/sys-admin/orgs/org-groups.js b/frontend/src/pages/sys-admin/orgs/org-groups.js
index 233a610502..35ea136b6f 100644
--- a/frontend/src/pages/sys-admin/orgs/org-groups.js
+++ b/frontend/src/pages/sys-admin/orgs/org-groups.js
@@ -8,6 +8,7 @@ import EmptyTip from '../../../components/empty-tip';
 import Loading from '../../../components/loading';
 import CommonOperationConfirmationDialog from '../../../components/dialog/common-operation-confirmation-dialog';
 import MainPanelTopbar from '../main-panel-topbar';
+import UserLink from '../user-link';
 import OrgNav from './org-nav';
 
 class Content extends Component {
@@ -101,7 +102,7 @@ class Item extends Component {
       <Fragment>
         <tr onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
           <td><a href={groupUrl}>{item.group_name}</a></td>
-          <td><a href={`${siteRoot}useradmin/info/${encodeURIComponent(item.creator_email)}/`}>{item.creator_name}</a></td>
+          <td><UserLink email={item.creator_email} name={item.creator_name} /></td>
           <td>{moment(item.created_at).format('YYYY-MM-DD hh:mm:ss')}</td>
           <td>
             <a href="#" className={`action-icon sf2-icon-delete ${isOpIconShown ? '' : 'invisible'}`} title={gettext('Delete')} onClick={this.toggleDeleteDialog}></a>
diff --git a/frontend/src/pages/sys-admin/orgs/org-repos.js b/frontend/src/pages/sys-admin/orgs/org-repos.js
index 78afbe43aa..91514a9be5 100644
--- a/frontend/src/pages/sys-admin/orgs/org-repos.js
+++ b/frontend/src/pages/sys-admin/orgs/org-repos.js
@@ -7,6 +7,7 @@ import EmptyTip from '../../../components/empty-tip';
 import Loading from '../../../components/loading';
 import CommonOperationConfirmationDialog from '../../../components/dialog/common-operation-confirmation-dialog';
 import MainPanelTopbar from '../main-panel-topbar';
+import UserLink from '../user-link';
 import OrgNav from './org-nav';
 
 class Content extends Component {
@@ -103,7 +104,7 @@ class Item extends Component {
           <td>{item.repo_id}</td>
           <td>
             {item.owner_email ?
-              <a href={`${siteRoot}useradmin/info/${encodeURIComponent(item.owner_email)}/`}>{item.owner_name}</a> :
+              <UserLink email={item.owner_email} name={item.owner_name} /> :
               '--'
             }
           </td>
diff --git a/frontend/src/pages/sys-admin/orgs/org-users.js b/frontend/src/pages/sys-admin/orgs/org-users.js
index 9c16eb1c46..876238b28f 100644
--- a/frontend/src/pages/sys-admin/orgs/org-users.js
+++ b/frontend/src/pages/sys-admin/orgs/org-users.js
@@ -11,6 +11,7 @@ import SysAdminUserStatusEditor from '../../../components/select-editor/sysadmin
 import SysAdminAddUserDialog from '../../../components/dialog/sysadmin-dialog/sysadmin-add-user-dialog';
 import CommonOperationConfirmationDialog from '../../../components/dialog/common-operation-confirmation-dialog';
 import MainPanelTopbar from '../main-panel-topbar';
+import UserLink from '../user-link';
 import OrgNav from './org-nav';
 import OpMenu from './user-op-menu';
 
@@ -170,7 +171,7 @@ class Item extends Component {
     return (
       <Fragment>
         <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
-          <td><a href={`${siteRoot}useradmin/info/${encodeURIComponent(item.email)}/`}>{item.name}</a></td>
+          <td><UserLink email={item.email} name={item.name} /></td>
           <td>
             <SysAdminUserStatusEditor
               isTextMode={true}
diff --git a/frontend/src/pages/sys-admin/orgs/orgs.js b/frontend/src/pages/sys-admin/orgs/orgs.js
index 19252213a2..717b3462b4 100644
--- a/frontend/src/pages/sys-admin/orgs/orgs.js
+++ b/frontend/src/pages/sys-admin/orgs/orgs.js
@@ -12,6 +12,7 @@ import SysAdminUserRoleEditor from '../../../components/select-editor/sysadmin-u
 import SysAdminAddOrgDialog from '../../../components/dialog/sysadmin-dialog/sysadmin-add-org-dialog';
 import CommonOperationConfirmationDialog from '../../../components/dialog/common-operation-confirmation-dialog';
 import MainPanelTopbar from '../main-panel-topbar';
+import UserLink from '../user-link';
 
 const { availableRoles } = window.sysadmin.pageOptions;
 
@@ -108,7 +109,9 @@ class Item extends Component {
       <Fragment>
         <tr onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
           <td><Link to={`${siteRoot}sys/organizations/${item.org_id}/info/`}>{item.org_name}</Link></td>
-          <td><a href={`${siteRoot}useradmin/info/${encodeURIComponent(item.creator_email)}/`}>{item.creator_name}</a></td>
+          <td>
+      <UserLink email={item.creator_email} name={item.creator_name} />
+          </td>
           <td>
             <SysAdminUserRoleEditor
               isTextMode={true}
diff --git a/frontend/src/pages/sys-admin/repos/all-repos.js b/frontend/src/pages/sys-admin/repos/all-repos.js
index 2cc66830bb..02aedca1d1 100644
--- a/frontend/src/pages/sys-admin/repos/all-repos.js
+++ b/frontend/src/pages/sys-admin/repos/all-repos.js
@@ -15,6 +15,7 @@ import SysAdminShareDialog from '../../../components/dialog/sysadmin-dialog/sysa
 import SysAdminLibHistorySettingDialog from '../../../components/dialog/sysadmin-dialog/sysadmin-lib-history-setting-dialog';
 import SysAdminCreateRepoDialog from '../../../components/dialog/sysadmin-dialog/sysadmin-create-repo-dialog';
 import MainPanelTopbar from '../main-panel-topbar';
+import UserLink from '../user-link';
 import ReposNav from './repos-nav';
 import RepoOpMenu from './repo-op-menu';
 
@@ -231,7 +232,7 @@ class Item extends Component {
           <td>
             {isGroupOwnedRepo ?
               <Link to={`${siteRoot}sys/departments/${repo.owner_name}/`}>{repo.group_name}</Link> :
-              <Link to={`${siteRoot}sys/users/${encodeURIComponent(repo.owner_email)}/`}>{repo.owner_name}</Link>
+              <UserLink email={repo.owner_email} name={repo.owner_name} />
             }
           </td>
           <td>
diff --git a/frontend/src/pages/sys-admin/repos/trash-repos.js b/frontend/src/pages/sys-admin/repos/trash-repos.js
index 0362efc223..c16aad7f1f 100644
--- a/frontend/src/pages/sys-admin/repos/trash-repos.js
+++ b/frontend/src/pages/sys-admin/repos/trash-repos.js
@@ -1,15 +1,16 @@
 import React, { Component, Fragment } from 'react';
 import { Button } from 'reactstrap';
-import { seafileAPI } from '../../../utils/seafile-api';
-import { gettext ,siteRoot } from '../../../utils/constants';
-import toaster from '../../../components/toast';
-import { Utils } from '../../../utils/utils';
-import EmptyTip from '../../../components/empty-tip';
 import moment from 'moment';
+import { Utils } from '../../../utils/utils';
+import { seafileAPI } from '../../../utils/seafile-api';
+import { gettext } from '../../../utils/constants';
+import toaster from '../../../components/toast';
+import EmptyTip from '../../../components/empty-tip';
 import Loading from '../../../components/loading';
 import Paginator from '../../../components/paginator';
 import ModalPortal from '../../../components/modal-portal';
 import CommonOperationConfirmationDialog from '../../../components/dialog/common-operation-confirmation-dialog';
+import UserLink from '../user-link';
 import ReposNav from './repos-nav';
 import MainPanelTopbar from '../main-panel-topbar';
 
@@ -155,7 +156,8 @@ class Item extends Component {
           <td>{repo.name}</td>
           <td>
             {repo.owner.indexOf('@seafile_group') == -1 ?
-              <a href={`${siteRoot}useradmin/info/${encodeURIComponent(repo.owner)}/`}>{repo.owner_name}</a> : repo.group_name}
+              <UserLink email={repo.owner} name={repo.owner_name} /> :
+              repo.group_name}
           </td>
           <td>{moment(repo.delete_time).fromNow()}</td>
           <td>
diff --git a/frontend/src/pages/sys-admin/user-link.js b/frontend/src/pages/sys-admin/user-link.js
new file mode 100644
index 0000000000..fb0ff02c7f
--- /dev/null
+++ b/frontend/src/pages/sys-admin/user-link.js
@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Link } from '@reach/router';
+import { siteRoot } from '../../utils/constants';
+
+const propTypes = {
+  email: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired
+};
+
+class UserLink extends Component {
+
+  render() {
+    return <Link to={`${siteRoot}sys/users/${encodeURIComponent(this.props.email)}/`}>{this.props.name}</Link>;
+  }
+}
+
+UserLink.propTypes = propTypes;
+
+export default UserLink;
diff --git a/frontend/src/pages/sys-admin/users/ldap-users.js b/frontend/src/pages/sys-admin/users/ldap-users.js
index dfaaac2440..478b2ccadd 100644
--- a/frontend/src/pages/sys-admin/users/ldap-users.js
+++ b/frontend/src/pages/sys-admin/users/ldap-users.js
@@ -9,6 +9,7 @@ import Loading from '../../../components/loading';
 import Paginator from '../../../components/paginator';
 import UsersNav from './users-nav';
 import MainPanelTopbar from '../main-panel-topbar';
+import UserLink from '../user-link';
 
 class Content extends Component {
 
@@ -84,9 +85,7 @@ class Item extends Component {
     return (
       <Fragment>
         <tr>
-          <td>
-            <Link to={`${siteRoot}sys/users/${encodeURIComponent(item.email)}/`}>{item.email}</Link>
-          </td>
+          <td><UserLink email={item.email} name={item.email} /></td>
           <td>
             {`${Utils.bytesToSize(item.quota_usage)} / ${item.quota_total > 0 ? Utils.bytesToSize(item.quota_total) : '--'}`}
           </td>
diff --git a/frontend/src/pages/sys-admin/users/user-shared-repos.js b/frontend/src/pages/sys-admin/users/user-shared-repos.js
index 98077e6f1d..ef97d47dac 100644
--- a/frontend/src/pages/sys-admin/users/user-shared-repos.js
+++ b/frontend/src/pages/sys-admin/users/user-shared-repos.js
@@ -10,6 +10,7 @@ import Loading from '../../../components/loading';
 import CommonOperationConfirmationDialog from '../../../components/dialog/common-operation-confirmation-dialog';
 import TransferDialog from '../../../components/dialog/transfer-dialog';
 import MainPanelTopbar from '../main-panel-topbar';
+import UserLink from '../user-link';
 import Nav from './user-nav';
 import OpMenu from './user-op-menu';
 
@@ -82,17 +83,17 @@ class Item extends Component {
     }
   }
   
-  getOwnerUrl = () => {
-    let url;
+  getOwnerLink = () => {
+    let link;
     const { item } = this.props;
     const index = item.owner_email.indexOf('@seafile_group');
     if (index == -1) {
-      url = `${siteRoot}sys/users/${encodeURIComponent(item.owner_email)}/`;
+      link = <UserLink email={item.owner_email} name={item.owner_name} />;
     } else {
       const groupID = item.owner_email.substring(0, index);
-      url = `${siteRoot}sys/departments/${groupID}/`;
+      link = <Link to={`${siteRoot}sys/departments/${groupID}/`}>{item.owner_name}</Link>;
     }
-    return url;
+    return link;
   }
 
   render() {
@@ -104,7 +105,7 @@ class Item extends Component {
         <tr>
           <td><img src={iconUrl} title={iconTitle} alt={iconTitle} width="24" /></td>
           <td>{this.renderRepoName()}</td>
-          <td><Link to={this.getOwnerUrl()}>{item.owner_name}</Link></td>
+          <td>{this.getOwnerLink()}</td>
           <td>{Utils.bytesToSize(item.size)}</td>
           <td>{moment(item.last_modify).fromNow()}</td>
         </tr>
diff --git a/frontend/src/pages/sys-admin/users/users.js b/frontend/src/pages/sys-admin/users/users.js
index d7e8d4459f..2cf00ed047 100644
--- a/frontend/src/pages/sys-admin/users/users.js
+++ b/frontend/src/pages/sys-admin/users/users.js
@@ -20,6 +20,7 @@ import CommonOperationConfirmationDialog from '../../../components/dialog/common
 import SysAdminUser from '../../../models/sysadmin-user';
 import SysAdminAdminUser from '../../../models/sysadmin-admin-user';
 import MainPanelTopbar from '../main-panel-topbar';
+import UserLink from '../user-link';
 import UsersNav from './users-nav';
 import OpMenu from './user-op-menu';
 
@@ -333,7 +334,7 @@ class Item extends Component {
             <input type="checkbox" className="vam" onChange={this.onUserSelected} checked={item.isSelected} />
           </td>
           <td>
-            <Link to={`${siteRoot}sys/users/${encodeURIComponent(item.email)}/`}>{item.name}</Link>
+            <UserLink email={item.email} name={item.name} />
             {item.contact_email && 
               <Fragment>
                 <br />