refactor: Refactor path jump

Refactor path jump by routeName which is defined in menu as key

Change-Id: I82cda19a2b92b29498238b85c75181848e51e072

docs/en/develop/3-1-BaseList-introduction.md

@@ -175,7 +175,7 @@ English | [Chinese](../../zh/develop/3-1-BaseList-introduction.md)
       {
         title: t('ID/Name'),
         dataIndex: 'name',
-        linkPrefix: `/compute/${this.getUrl('image')}/detail`,
+        routeName: this.getRouteName('imageDetail'),
       },
       {
         title: t('Project ID/Name'),
@@ -526,7 +526,7 @@ English | [Chinese](../../zh/develop/3-1-BaseList-introduction.md)
   - Is the current page a "management platform" page
 - `hasAdminRole`
   - Whether the logged-in user role has an administrator role
-- `getUrl`
+- `getRoutePath`
   - Function to generate page URL
   - For example, it is necessary to provide a jump function to the associated resources of the list page. Using this function, you can jump to the corresponding address of the console in the console, and jump to the corresponding address of the management platform in the management platform.
 - `params`

docs/en/develop/3-2-BaseTabList-introduction.md

@@ -114,7 +114,7 @@ English | [Chinese](../../zh/develop/3-2-BaseTabList-introduction.md)
   - Is the current page a "management platform" page
 - `hasAdminRole`
   - Whether the logged-in user role has an administrator role
-- `getUrl`
+- `getRoutePath`
   - Function to generate page URL
   - For example, it is necessary to provide a jump function for the associated resources of the list page. Using this function, you can jump to the corresponding address of the console in the console, and jump to the corresponding address of the management platform in the management platform.
 

docs/en/develop/3-3-BaseDetail-introduction.md

@@ -72,7 +72,7 @@ English | [Chinese](../../zh/develop/3-3-BaseDetail-introduction.md)
 
     ```javascript
     get listUrl() {
-      return this.getUrl('/storage/volume');
+      return this.getRoutePath('volume');
     }
     ```
 
@@ -241,7 +241,7 @@ English | [Chinese](../../zh/develop/3-3-BaseDetail-introduction.md)
   - `id` in routing information
 - `isAdminPage`
   - Is the current page a "management platform" page
-- `getUrl`
+- `getRoutePath`
   - Function to generate page URL
   - For example, it is necessary to provide a jump function to the associated resource. Using this function, you can jump to the corresponding address of the console in the console, and jump to the corresponding address of the management platform in the management platform.
 - `routing`

docs/en/develop/3-4-BaseDetailInfo-introduction.md

@@ -131,7 +131,7 @@ English | [Chinese](../../zh/develop/3-4-BaseDetailInfo-introduction.md)
   - `id` in routing information
 - `isAdminPage`
   - Is the current page a "management platform" page
-- `getUrl`
+- `getRoutePath`
   - Function to generate page URL
   - For example, it is necessary to provide a jump function to the associated resource. Using this function, you can jump to the corresponding address of the console in the console, and jump to the corresponding address of the management platform in the management platform.
 - `routing`

docs/en/develop/3-6-FormAction-introduction.md

@@ -147,7 +147,7 @@ English | [Chinese](../../zh/develop/3-6-FormAction-introduction.md)
 
     ```javascript
     get listUrl() {
-      return this.getUrl('/storage/volume');
+      return this.getRoutePath('volume');
     }
     ```
 
@@ -381,7 +381,7 @@ English | [Chinese](../../zh/develop/3-6-FormAction-introduction.md)
   - After the form is successfully validated, the updated form value
 - `isAdminPage`
   - Is the current page a "management platform" page
-- `getUrl`
+- `getRoutePath`
   - Function to generate page URL
   - For example, it is necessary to provide a jump function to the associated resource. Using this function, you can jump to the corresponding address of the console in the console, and jump to the corresponding address of the management platform in the management platform.
 

docs/en/develop/3-9-StepAction-introduction.md

@@ -286,7 +286,7 @@ English | [简体中文](../../zh/develop/3-9-StepAction-introduction.md)
 - `isAdminPage`
   - Whether current page is a "management platform" page
 
-- `getUrl`
+- `getRoutePath`
   - Generate function of page URL
   - Such as: need to provide a ability of jump to the associated resource, use this function, you can jump to the corresponding address of the `console platform` in the `console platform`, and jump to the corresponding address of the `management platform` in the `management platform`.
 

docs/zh/develop/3-1-BaseList-introduction.md

@@ -175,7 +175,7 @@
       {
         title: t('ID/Name'),
         dataIndex: 'name',
-        linkPrefix: `/compute/${this.getUrl('image')}/detail`,
+        routeName: this.getRouteName('imageDetail'),
       },
       {
         title: t('Project ID/Name'),
@@ -526,7 +526,7 @@
   - 当前页面是否是“管理平台”的页面
 - `hasAdminRole`
   - 登录的用户角色是否具有管理员角色
-- `getUrl`
+- `getRoutePath`
   - 生成页面 Url 的函数
   - 如：需要给列表页的关联资源提供跳转功能，使用该函数，可以在控制台跳转到控制台的相应地址，在管理平台跳转到管理平台的相应地址
 - `params`

docs/zh/develop/3-2-BaseTabList-introduction.md

@@ -114,7 +114,7 @@
   - 当前页面是否是“管理平台”的页面
 - `hasAdminRole`
   - 登录的用户角色是否具有管理员角色
-- `getUrl`
+- `getRoutePath`
   - 生成页面 Url 的函数
   - 如：需要给列表页的关联资源提供跳转功能，使用该函数，可以在控制台跳转到控制台的相应地址，在管理平台跳转到管理平台的相应地址
 

docs/zh/develop/3-3-BaseDetail-introduction.md

@@ -72,7 +72,7 @@
 
     ```javascript
     get listUrl() {
-      return this.getUrl('/storage/volume');
+      return this.getRoutePath('volume');
     }
     ```
 
@@ -241,7 +241,7 @@
   - 路由信息中的`id`
 - `isAdminPage`
   - 当前页面是否是“管理平台”的页面
-- `getUrl`
+- `getRoutePath`
   - 生成页面 Url 的函数
   - 如：需要给关联资源提供跳转功能，使用该函数，可以在控制台跳转到控制台的相应地址，在管理平台跳转到管理平台的相应地址
 - `routing`

docs/zh/develop/3-4-BaseDetailInfo-introduction.md

@@ -131,7 +131,7 @@
   - 路由信息中的`id`
 - `isAdminPage`
   - 当前页面是否是“管理平台”的页面
-- `getUrl`
+- `getRoutePath`
   - 生成页面 Url 的函数
   - 如：需要给关联资源提供跳转功能，使用该函数，可以在控制台跳转到控制台的相应地址，在管理平台跳转到管理平台的相应地址
 - `routing`

docs/zh/develop/3-6-FormAction-introduction.md

@@ -147,7 +147,7 @@
 
     ```javascript
     get listUrl() {
-      return this.getUrl('/storage/volume');
+      return this.getRoutePath('volume');
     }
     ```
 
@@ -381,7 +381,7 @@
   - 表单验证成功后，更新的表单值
 - `isAdminPage`
   - 当前页面是否是“管理平台”的页面
-- `getUrl`
+- `getRoutePath`
   - 生成页面 Url 的函数
   - 如：需要给关联资源提供跳转功能，使用该函数，可以在控制台跳转到控制台的相应地址，在管理平台跳转到管理平台的相应地址
 

docs/zh/develop/3-9-StepAction-introduction.md

@@ -282,7 +282,7 @@
   - 表单验证成功后，更新的表单值
 - `isAdminPage`
   - 当前页面是否是“管理平台”的页面
-- `getUrl`
+- `getRoutePath`
   - 生成页面 Url 的函数
   - 如：需要给关联资源提供跳转功能，使用该函数，可以在控制台跳转到控制台的相应地址，在管理平台跳转到管理平台的相应地址
 

src/components/Form/index.jsx

@@ -22,6 +22,7 @@ import { isAdminPage, firstUpperCase, unescapeHtml } from 'utils/index';
 import { parse } from 'qs';
 import FormItem from 'components/FormItem';
 import { CancelToken } from 'axios';
+import { getPath, getLinkRender } from 'utils/route-map';
 import styles from './index.less';
 
 export default class BaseForm extends React.Component {
@@ -137,6 +138,20 @@ export default class BaseForm extends React.Component {
     return this.isAdminPage ? `${path}${adminStr || '-admin'}` : path;
   }
 
+  getRouteName(routeName) {
+    return this.isAdminPage ? `${routeName}Admin` : routeName;
+  }
+
+  getRoutePath(routeName, params = {}, query = {}) {
+    const realName = this.getRouteName(routeName);
+    return getPath({ key: realName, params, query });
+  }
+
+  getLinkRender(routeName, value, params = {}, query = {}) {
+    const realName = this.getRouteName(routeName);
+    return getLinkRender({ key: realName, params, query, value });
+  }
+
   get isStep() {
     return false;
   }

src/components/FormItem/MemberAllocator/index.jsx

@@ -18,8 +18,8 @@ import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 import SelectTable from 'components/FormItem/SelectTable';
 import { ipValidate } from 'utils/validate';
 import { isAdminPage } from 'utils/index';
-import { Link } from 'react-router-dom';
 import { Address4, Address6 } from 'ip-address';
+import { getLinkRender } from 'utils/route-map';
 import Item from './Item';
 
 const { isIPv4, isIpv6 } = ipValidate;
@@ -34,9 +34,11 @@ const MemberAllocator = ({ componentProps, formItemProps }) => {
     onChange && onChange(data);
   };
 
-  function getUrl(path, adminStr) {
+  function getLink(routerName, item) {
     const { pathname } = window.location;
-    return isAdminPage(pathname) ? `${path}${adminStr || '-admin'}` : path;
+    const key = isAdminPage(pathname) ? `${routerName}Admin` : routerName;
+    const { id } = item;
+    return getLinkRender({ key, params: { id }, value: id });
   }
 
   let addOuter = () => {};
@@ -60,16 +62,7 @@ const MemberAllocator = ({ componentProps, formItemProps }) => {
               dataIndex: 'name',
               render: (n, record) => (
                 <div>
-                  <div>
+                  <div>{getLink('virtualAdapterDetail', record)}</div>
-                    <Link
-                      to={`/network/${getUrl(
-                        'virtual_adapter',
-                        '_admin'
-                      )}/detail/${record.id}`}
-                    >
-                      {record.id}
-                    </Link>
-                  </div>
                   <div>{n || '-'}</div>
                 </div>
               ),

src/components/FormItem/NetworkSelectTable/index.jsx

@@ -19,6 +19,7 @@ import { NetworkStore } from 'stores/neutron/network';
 import { yesNoOptions } from 'utils/constants';
 import { networkColumns, networkSortProps } from 'resources/network';
 import { isAdminPage } from 'utils/index';
+import { getPath } from 'utils/route-map';
 
 export class NetworkSelectTable extends Component {
   constructor(props) {
@@ -87,8 +88,13 @@ export class NetworkSelectTable extends Component {
     ...networkSortProps,
   });
 
-  getUrl(path, adminStr) {
+  getRouteName(routeName) {
-    return this.isAdminPage ? `${path}${adminStr || '-admin'}` : path;
+    return this.isAdminPage ? `${routeName}Admin` : routeName;
+  }
+
+  getRoutePath(routeName, params = {}, query = {}) {
+    const realName = this.getRouteName(routeName);
+    return getPath({ key: realName, params, query });
   }
 
   getColumns = (tab) => {

src/components/FormItem/VolumeSelectTable/index.jsx

@@ -67,8 +67,6 @@ export default class VolumeSelectTable extends Component {
     ...volumeSortProps,
   });
 
-  getUrl = () => {};
-
   getColumns = (tab) => {
     const columns = volumeColumns;
     const { key } = tab;

src/components/StepForm/index.jsx

@@ -20,6 +20,7 @@ import classnames from 'classnames';
 import { firstUpperCase, unescapeHtml } from 'utils/index';
 import { parse } from 'qs';
 import NotFound from 'components/Cards/NotFound';
+import { getPath, getLinkRender } from 'utils/route-map';
 import styles from './index.less';
 
 export default class BaseStepForm extends React.Component {
@@ -92,7 +93,7 @@ export default class BaseStepForm extends React.Component {
   }
 
   get listUrl() {
-    return '/base/tmp';
+    return '';
   }
 
   get checkEndpoint() {
@@ -212,6 +213,20 @@ export default class BaseStepForm extends React.Component {
     return this.isAdminPage ? `${path}${adminStr || '-admin'}` : path;
   }
 
+  getRouteName(routeName) {
+    return this.isAdminPage ? `${routeName}Admin` : routeName;
+  }
+
+  getRoutePath(routeName, params = {}, query = {}) {
+    const realName = this.getRouteName(routeName);
+    return getPath({ key: realName, params, query });
+  }
+
+  getLinkRender(routeName, value, params = {}, query = {}) {
+    const realName = this.getRouteName(routeName);
+    return getLinkRender({ key: realName, params, query, value });
+  }
+
   getPrevBtn() {
     const { current } = this.state;
     if (current === 0) {

src/components/TableButton/RuleButton.jsx

@@ -15,6 +15,7 @@
 import React, { Component } from 'react';
 import TableButton from 'components/TableButton';
 import { getSelfColumns } from 'resources/security-group-rule';
+import { getPath } from 'utils/route-map';
 
 export default class RuleButton extends Component {
   getUrl(path, adminStr) {
@@ -22,7 +23,10 @@ export default class RuleButton extends Component {
   }
 
   getDetailUrl(id) {
-    return `${this.getUrl('/network/security-group')}/detail/${id}`;
+    const key = this.isAdminPage
+      ? 'securityGroupDetailAdmin'
+      : 'securityGroupDetail';
+    return getPath({ key, params: { id } });
   }
 
   render() {

src/components/Tables/Base/index.jsx

@@ -17,7 +17,6 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import isEqual from 'react-fast-compare';
 import { toJS } from 'mobx';
-import { Link } from 'react-router-dom';
 import { includes, get, isArray, isString } from 'lodash';
 import { Button, Table, Dropdown, Input, Typography, Tooltip } from 'antd';
 import MagicInput from 'components/MagicInput';
@@ -39,10 +38,13 @@ import {
   getStatusRender,
   getRender,
   getValueRenderFunc,
+  getNameRenderByRouter,
+  getNameRender,
+  columnRender,
 } from 'utils/table';
 import { getNoValue } from 'utils/index';
-import { columnRender } from 'utils/render';
 import { getLocalStorageItem, setLocalStorageItem } from 'utils/local-storage';
+import { getLinkRender } from 'utils/route-map';
 import { inject } from 'mobx-react';
 import globalRootStore from 'stores/root';
 import CustomColumns from './CustomColumns';
@@ -50,6 +52,7 @@ import ItemActionButtons from './ItemActionButtons';
 import PrimaryActionButtons from './PrimaryActionButtons';
 import BatchActionButtons from './BatchActionButtons';
 import Download from './Download';
+
 import styles from './index.less';
 
 @inject('rootStore')
@@ -330,16 +333,14 @@ export default class BaseTable extends React.Component {
       if (!projectId) {
         return '-';
       }
-      const url = `/identity/project-admin/detail/${projectId}`;
+      const link = getLinkRender({
+        key: 'projectDetailAdmin',
+        params: { id: projectId },
+        value: projectId,
+      });
       return (
         <>
-          <div>
+          <div>{globalRootStore.hasAdminRole ? link : projectId}</div>
-            {globalRootStore.hasAdminRole ? (
-              <Link to={url}>{projectId}</Link>
-            ) : (
-              projectId
-            )}
-          </div>
           <div>{value || '-'}</div>
         </>
       );
@@ -353,63 +354,6 @@ export default class BaseTable extends React.Component {
     return (value) => getNoValue(value);
   };
 
-  getLinkUrl = (prefix, id) => {
-    if (!prefix) {
-      return null;
-    }
-    if (prefix[prefix.length - 1] === '/') {
-      return `${prefix}${id}`;
-    }
-    return `${prefix}/${id}`;
-  };
-
-  getNameRender = (render, column) => {
-    if (render) {
-      return render;
-    }
-    const {
-      linkPrefix,
-      dataIndex,
-      idKey,
-      linkPrefixFunc,
-      linkFunc,
-      hasNoDetail = false,
-    } = column;
-    const { rowKey } = this.props;
-    return (value, record) => {
-      const idValue = get(record, idKey || rowKey);
-      let url = null;
-      if (linkFunc) {
-        url = linkFunc(value, record);
-      } else {
-        const linkValue = linkPrefixFunc
-          ? linkPrefixFunc(value, record)
-          : linkPrefix;
-        url = this.getLinkUrl(linkValue, idValue);
-      }
-      const nameValue = value || get(record, dataIndex) || '-';
-      if (hasNoDetail) {
-        return (
-          <div>
-            <div>{idValue}</div>
-            <div>{nameValue}</div>
-          </div>
-        );
-      }
-      if (!url && !hasNoDetail) {
-        return nameValue;
-      }
-      return (
-        <div>
-          <div>
-            <Link to={url}>{idValue}</Link>
-          </div>
-          <div>{nameValue}</div>
-        </div>
-      );
-    };
-  };
-
   // eslint-disable-next-line no-unused-vars
   getPriceRender = (render, column) => {
     if (render) {
@@ -469,6 +413,9 @@ export default class BaseTable extends React.Component {
         tip,
         isStatus,
         isName,
+        isLink,
+        routeName,
+        linkPrefix,
         isPrice,
         ...rest
       } = column;
@@ -485,8 +432,12 @@ export default class BaseTable extends React.Component {
       if (dataIndex === 'project_name') {
         newRender = this.getProjectRender(newRender);
       }
-      if (dataIndex === 'name' || isName) {
+      if ((dataIndex === 'name' && routeName) || isLink) {
-        newRender = this.getNameRender(newRender, column);
+        const { rowKey } = this.props;
+        newRender = getNameRenderByRouter(newRender, column, rowKey);
+      }
+      if ((dataIndex === 'name' && linkPrefix) || isName) {
+        newRender = getNameRender(newRender, column);
       }
       if (dataIndex === 'cost' || isPrice) {
         newRender = this.getPriceRender(newRender, column);

src/containers/Action/FormAction/index.jsx

@@ -13,6 +13,7 @@
 // limitations under the License.
 
 import BaseForm from 'components/Form';
+import { getPath } from 'utils/route-map';
 
 export default class FormAction extends BaseForm {
   static id = 'formAction';
@@ -36,4 +37,13 @@ export default class FormAction extends BaseForm {
   getUrl(path, adminStr) {
     return this.isAdminPage ? `${path}${adminStr || '-admin'}` : path;
   }
+
+  getRouteName(routeName) {
+    return this.isAdminPage ? `${routeName}Admin` : routeName;
+  }
+
+  getRoutePath(routeName, params = {}, query = {}) {
+    const realName = this.getRouteName(routeName);
+    return getPath({ key: realName, params, query });
+  }
 }

src/containers/Action/StepAction/index.jsx

@@ -32,12 +32,4 @@ export default class StepAction extends StepForm {
   get hasConfirmStep() {
     return true;
   }
-
-  // get isAdminPage() {
-  //   return this.props.isAdminPage || false;
-  // }
-
-  // getUrl(path, adminStr) {
-  //   return this.isAdminPage ? `${path}${adminStr || '-admin'}` : path;
-  // }
 }

src/containers/BaseDetail/index.jsx

@@ -18,6 +18,7 @@ import Card from 'components/DetailCard';
 import { toJS } from 'mobx';
 import { has } from 'lodash';
 import { isAdminPage } from 'utils/index';
+import { getPath, getLinkRender } from 'utils/route-map';
 import styles from './index.less';
 
 export default class BaseDetail extends React.Component {
@@ -86,6 +87,20 @@ export default class BaseDetail extends React.Component {
     return this.isAdminPage ? `${path}${adminStr || '-admin'}` : path;
   }
 
+  getRouteName(routeName) {
+    return this.isAdminPage ? `${routeName}Admin` : routeName;
+  }
+
+  getRoutePath(routeName, params = {}, query = {}) {
+    const realName = this.getRouteName(routeName);
+    return getPath({ key: realName, params, query });
+  }
+
+  getLinkRender(routeName, value, params = {}, query = {}) {
+    const realName = this.getRouteName(routeName);
+    return getLinkRender({ key: realName, params, query, value });
+  }
+
   fetchData = (params) => {
     if (this.shouldFetchDetail && this.store.fetchDetail) {
       this.store

src/containers/List/index.jsx

@@ -34,6 +34,7 @@ import { checkTimeIn } from 'utils/time';
 import checkItemPolicy from 'resources/policy';
 import NotFound from 'components/Cards/NotFound';
 import { getTags } from 'components/MagicInput';
+import { getPath, getLinkRender } from 'utils/route-map';
 import styles from './index.less';
 
 const tabOtherHeight = 326;
@@ -169,6 +170,20 @@ export default class BaseList extends React.Component {
     return this.isAdminPage ? `${path}${adminStr || '-admin'}` : path;
   }
 
+  getRouteName(routeName) {
+    return this.isAdminPage ? `${routeName}Admin` : routeName;
+  }
+
+  getRoutePath(routeName, params = {}, query = {}) {
+    const realName = this.getRouteName(routeName);
+    return getPath({ key: realName, params, query });
+  }
+
+  getLinkRender(routeName, value, params = {}, query = {}) {
+    const realName = this.getRouteName(routeName);
+    return getLinkRender({ key: realName, params, query, value });
+  }
+
   get prefix() {
     return this.props.match.url;
   }
@@ -1064,7 +1079,7 @@ export default class BaseList extends React.Component {
     } catch (e) {
       // eslint-disable-next-line no-console
       console.log(e);
-      const link = this.getUrl('/base/overview');
+      const link = this.getRoutePath('overview');
       return <NotFound title={this.name} link={link} codeError />;
     }
   }
@@ -1155,7 +1170,7 @@ export default class BaseList extends React.Component {
 
   render() {
     if (this.endpointError) {
-      const link = this.getUrl('/base/overview');
+      const link = this.getRoutePath('overview');
       return <NotFound title={this.name} link={link} endpointError />;
     }
     const table = this.renderTable();

src/containers/TabDetail/index.jsx

@@ -26,6 +26,7 @@ import { toJS } from 'mobx';
 import checkItemPolicy from 'resources/policy';
 import ItemActionButtons from 'components/Tables/Base/ItemActionButtons';
 import { emptyActionConfig } from 'utils/constants';
+import { getPath, getLinkRender } from 'utils/route-map';
 import styles from './index.less';
 
 export default class DetailBase extends React.Component {
@@ -71,6 +72,20 @@ export default class DetailBase extends React.Component {
     return this.isAdminPage ? `${path}${adminStr || '-admin'}` : path;
   }
 
+  getRouteName(routeName) {
+    return this.isAdminPage ? `${routeName}Admin` : routeName;
+  }
+
+  getRoutePath(routeName, params = {}, query = {}) {
+    const realName = this.getRouteName(routeName);
+    return getPath({ key: realName, params, query });
+  }
+
+  getLinkRender(routeName, value, params = {}, query = {}) {
+    const realName = this.getRouteName(routeName);
+    return getLinkRender({ key: realName, params, query, value });
+  }
+
   get tabs() {
     return [];
   }
@@ -166,7 +181,7 @@ export default class DetailBase extends React.Component {
   }
 
   get listUrl() {
-    return '/base/tmp';
+    return '';
   }
 
   get detailData() {

src/containers/TabList/index.jsx

@@ -17,6 +17,7 @@ import { parse } from 'qs';
 import classnames from 'classnames';
 import { Tabs } from 'antd';
 import { isAdminPage } from 'utils/index';
+import { getPath, getLinkRender } from 'utils/route-map';
 import NotFound from 'components/Cards/NotFound';
 import styles from './index.less';
 
@@ -67,6 +68,20 @@ export default class TabList extends Component {
     return this.isAdminPage ? `${path}${adminStr || '-admin'}` : path;
   }
 
+  getRouteName(routeName) {
+    return this.isAdminPage ? `${routeName}Admin` : routeName;
+  }
+
+  getRoutePath(routeName, params = {}, query = {}) {
+    const realName = this.getRouteName(routeName);
+    return getPath({ key: realName, params, query });
+  }
+
+  getLinkRender(routeName, value, params = {}, query = {}) {
+    const realName = this.getRouteName(routeName);
+    return getLinkRender({ key: realName, params, query, value });
+  }
+
   get tabs() {
     const tabs = [
       {
@@ -137,7 +152,7 @@ export default class TabList extends Component {
       return null;
     }
     if (this.endpointError) {
-      const link = this.getUrl('/base/overview');
+      const link = this.getRoutePath('overview');
       return <NotFound title={this.name} link={link} endpointError />;
     }
     // if (this.tabs.length === 1) {

src/layouts/Base/Menu.jsx

@@ -21,6 +21,7 @@ import { toJS } from 'mobx';
 import classnames from 'classnames';
 import logoSmall from 'asset/image/logo-small.svg';
 import logoExtend from 'asset/image/logo-extend.svg';
+import { getPath } from 'utils/route-map';
 import styles from './index.less';
 
 const { SubMenu } = Menu;
@@ -47,6 +48,15 @@ export class LayoutMenu extends Component {
     return this.isAdminPage ? `${path}${adminStr || '-admin'}` : path;
   }
 
+  getRouteName(routeName) {
+    return this.isAdminPage ? `${routeName}Admin` : routeName;
+  }
+
+  getRoutePath(routeName, params = {}, query = {}) {
+    const realName = this.getRouteName(routeName);
+    return getPath({ key: realName, params, query });
+  }
+
   get rootStore() {
     return this.props.rootStore;
   }
@@ -217,7 +227,7 @@ export class LayoutMenu extends Component {
     const { collapsed, hover } = this.state;
     const isExtend = !collapsed || hover;
     const imageSvg = this.getImage(isExtend);
-    const homeUrl = this.getUrl('/base/overview');
+    const homeUrl = this.getRoutePath('overview');
     return (
       <div
         className={classnames(

src/layouts/Base/Right.jsx

@@ -20,6 +20,7 @@ import classnames from 'classnames';
 import renderRoutes from 'utils/RouterConfig';
 import NotFound from 'components/Cards/NotFound';
 import PageLoading from 'components/PageLoading';
+import { getPath } from 'utils/route-map';
 import styles from './index.less';
 
 const { Content } = Layout;
@@ -59,6 +60,15 @@ class Right extends Component {
     return this.isAdminPage ? `${path}${adminStr || '-admin'}` : path;
   }
 
+  getRouteName(routeName) {
+    return this.isAdminPage ? `${routeName}Admin` : routeName;
+  }
+
+  getRoutePath(routeName, params = {}, query = {}) {
+    const realName = this.getRouteName(routeName);
+    return getPath({ key: realName, params, query });
+  }
+
   checkHasTab = () => {
     const { currentRoutes = [] } = this.props;
     if (currentRoutes.length === 0) {
@@ -123,21 +133,12 @@ class Right extends Component {
       return (
         <NotFound
           title={t('data')}
-          link={this.getUrl('/base/overview')}
+          link={this.getRoutePath('overview')}
           codeError
         />
       );
     }
     try {
-      // const { currentRoutes = [] } = this.props;
-      // if (currentRoutes.length === 0) {
-      //   return (
-      //     <NotFound
-      //       title={t('data')}
-      //       link={this.getUrl('/base/overview')}
-      //     />
-      //   );
-      // }
       const children = (
         <div className={`${styles.main} ${mainBreadcrubClass} ${mainTabClass}`}>
           {renderRoutes(this.routes, extraProps)}
@@ -147,13 +148,8 @@ class Right extends Component {
     } catch (e) {
       // eslint-disable-next-line no-console
       console.log(e);
-      return (
+      const path = this.getRoutePath('overview');
-        <NotFound
+      return <NotFound title={t('data')} link={path} codeError />;
-          title={t('data')}
-          link={this.getUrl('/base/overview')}
-          codeError
-        />
-      );
     }
   };
 

src/layouts/Base/index.jsx

@@ -21,6 +21,7 @@ import { BellOutlined } from '@ant-design/icons';
 import checkItemPolicy from 'resources/policy';
 import { Layout } from 'antd';
 import GlobalHeader from 'components/Layout/GlobalHeader';
+import { setRouteMap, getPath } from 'utils/route-map';
 import renderAdminMenu from '../admin-menu';
 import renderMenu from '../menu';
 import renderUserMenu from '../user-menu';
@@ -100,6 +101,15 @@ export class BaseLayout extends Component {
     return this.isAdminPage ? `${path}${adminStr || '-admin'}` : path;
   }
 
+  getRouteName(routeName) {
+    return this.isAdminPage ? `${routeName}Admin` : routeName;
+  }
+
+  getRoutePath(routeName, params = {}, query = {}) {
+    const realName = this.getRouteName(routeName);
+    return getPath({ key: realName, params, query });
+  }
+
   filterMenuByHidden = (menu = []) => {
     if (menu.length === 0) {
       return menu;
@@ -208,6 +218,7 @@ export class BaseLayout extends Component {
       window.location.href = '/base/overview';
     }
     this.routes = this.props.route.routes;
+    setRouteMap(this.menu);
   }
 
   renderNotice() {

src/layouts/admin-menu.jsx

@@ -32,7 +32,7 @@ const renderMenu = (t) => {
     {
       path: '/base/overview-admin',
       name: t('Home'),
-      key: '/home',
+      key: 'overviewAdmin',
       icon: <HomeOutlined />,
       level: 0,
       hasBreadcrumb: false,
@@ -41,19 +41,20 @@ const renderMenu = (t) => {
     {
       path: '/compute',
       name: t('Compute'),
-      key: '/compute',
+      key: 'computeAdmin',
       icon: <DesktopOutlined />,
       children: [
         {
           path: '/compute/instance-admin',
           name: t('Instance'),
-          key: '/compute/instance-admin',
+          key: 'instanceAdmin',
           level: 1,
           children: [
             {
               path: /^\/compute\/instance-admin\/detail\/.[^/]+$/,
               name: t('Instance Detail'),
-              key: 'instance-detail',
+              key: 'instanceDetailAdmin',
+              routePath: '/compute/instance-admin/detail/:id',
               level: 2,
             },
           ],
@@ -61,19 +62,20 @@ const renderMenu = (t) => {
         {
           path: '/compute/flavor-admin',
           name: t('Flavor'),
-          key: '/compute/flavor',
+          key: 'flavorAdmin',
           level: 1,
           children: [
             {
               path: '/compute/flavor-admin/create',
               name: t('Create Flavor'),
-              key: 'flavor-create',
+              key: 'flavorCreateAdmin',
               level: 2,
             },
             {
               path: /^\/compute\/flavor-admin\/detail\/[^/]+$/,
               name: t('Flavor Detail'),
-              key: 'flavor-detail',
+              key: 'flavorDetailAdmin',
+              routePath: '/compute/flavor-admin/detail/:id',
               level: 2,
             },
           ],
@@ -81,13 +83,14 @@ const renderMenu = (t) => {
         {
           path: '/compute/server-group-admin',
           name: t('Server Group'),
-          key: '/compute/server-group-admin',
+          key: 'serverGroupAdmin',
           level: 1,
           children: [
             {
               path: /^\/compute\/server-group-admin\/detail\/.[^/]+$/,
               name: t('Server Group Detail'),
-              key: 'server-group-detail',
+              key: 'serverGroupDetailAdmin',
+              routePath: '/compute/server-group-admin/detail/:id',
               level: 2,
             },
           ],
@@ -95,19 +98,20 @@ const renderMenu = (t) => {
         {
           path: '/compute/image-admin',
           name: t('Image'),
-          key: '/compute/image-admin',
+          key: 'imageAdmin',
           level: 1,
           children: [
             {
               path: /^\/compute\/image-admin\/detail\/.[^/]+$/,
               name: t('Image Detail'),
-              key: 'image-detail',
+              key: 'imageDetailAdmin',
+              routePath: '/compute/image-admin/detail/:id',
               level: 2,
             },
             {
               path: '/compute/image-admin/create',
               name: t('Create Image'),
-              key: 'image-create',
+              key: 'imageCreateAdmin',
               level: 2,
             },
           ],
@@ -115,13 +119,14 @@ const renderMenu = (t) => {
         {
           path: '/compute/hypervisors-admin',
           name: t('Hypervisors'),
-          key: '/compute/hypervisors',
+          key: 'hypervisorAdmin',
           level: 1,
           children: [
             {
               path: /^\/compute\/hypervisors-admin\/detail\/.[^/]+$/,
               name: t('Hypervisor Detail'),
-              key: 'hypervisor-detail',
+              key: 'hypervisorDetailAdmin',
+              routePath: '/compute/hypervisors-admin/detail/:id',
               level: 2,
             },
           ],
@@ -129,32 +134,34 @@ const renderMenu = (t) => {
         {
           path: '/compute/aggregates-admin',
           name: t('Host Aggregates'),
-          key: '/compute/aggregates',
+          key: 'aggregateAdmin',
           level: 1,
           children: [],
         },
         {
           path: '/compute/baremetal-node-admin',
           name: t('Bare Metal Setting'),
-          key: '/compute/baremetal-node',
+          key: 'baremetalNodeAdmin',
           level: 1,
           children: [
             {
               path: /^\/compute\/baremetal-node-admin\/detail\/.[^/]+$/,
               name: t('Bare Metal Node Detail'),
-              key: 'baremetal-node-detail',
+              key: 'baremetaNodeDetailAdmin',
+              routePath: '/compute/baremetal-node-admin/detail/:id',
               level: 2,
             },
             {
               path: /^\/compute\/baremetal-node-admin\/create$/,
               name: t('Create Bare Metal Node'),
-              key: 'baremetal-node-create',
+              key: 'baremetalNodeCreateAdmin',
               level: 2,
             },
             {
               path: /^\/compute\/baremetal-node-admin\/edit\/.[^/]+$/,
               name: t('Bare Metal Node Edit'),
-              key: 'baremetal-node-edit',
+              key: 'baremetalNodeEditAdmin',
+              routePath: '/compute/baremetal-node-admin/detail/:id',
               level: 2,
             },
           ],
@@ -164,75 +171,80 @@ const renderMenu = (t) => {
     {
       path: '/storage',
       name: t('Storage'),
-      key: '/storage',
+      key: 'storageAdmin',
       icon: <DatabaseOutlined />,
       children: [
         {
           path: '/storage/volume-admin',
           name: t('Volume'),
-          key: '/storage/volume',
+          key: 'volumeAdmin',
           level: 1,
           children: [
             {
               path: /^\/storage\/volume-admin\/detail\/.[^/]+$/,
               name: t('Volume Detail'),
-              key: 'volume-detail',
+              key: 'volumeDetailAdmin',
               level: 2,
+              routePath: '/storage/volume-admin/detail/:id',
             },
           ],
         },
         {
           path: '/storage/backup-admin',
           name: t('Backups'),
-          key: '/storage/backup',
+          key: 'backupAdmin',
           level: 1,
           children: [
             {
               path: /^\/storage\/backup-admin\/detail\/.[^/]+$/,
               name: t('Backup Detail'),
-              key: 'backup-detail',
+              key: 'backupDetailAdmin',
               level: 2,
+              routePath: '/storage/backup-admin/detail/:id',
             },
           ],
         },
         {
           path: '/storage/snapshot-admin',
           name: t('Volume Snapshot'),
-          key: '/storage/snapshot',
+          key: 'snapshotAdmin',
           level: 1,
           children: [
             {
               path: /^\/storage\/snapshot-admin\/detail\/.[^/]+$/,
               name: t('Snapshot Detail'),
-              key: 'snapshot-detail',
+              key: 'snapshotDetailAdmin',
               level: 2,
+              routePath: '/storage/snapshot-admin/detail/:id',
             },
           ],
         },
         {
           path: '/storage/volume-type-admin',
           name: t('Volume Type'),
-          key: '/storage/volume-type',
+          key: 'volumeTypeAdmin',
           level: 1,
           children: [
             {
               path: /^\/storage\/volume-type-admin\/detail\/.[^/]+$/,
               name: t('Volume Type Detail'),
-              key: 'volume-type-detail',
+              key: 'volumeTypeDetailAdmin',
               level: 2,
+              routePath: '/storage/volume-type-admin/detail/:id',
             },
             {
               path: /^\/storage\/volume-type-admin\/qos\/detail\/.[^/]+$/,
               name: t('QoS Detail'),
-              key: 'volume-type-qos-detail',
+              key: 'volumeTypeQosDetailAdmin',
               level: 2,
+              routePath: '/storage/volume-type-admin/qos/detail/:id',
             },
           ],
         },
         {
           path: '/storage/storage-admin',
           name: t('Storage Backend'),
-          key: '/storage/storage',
+          key: 'storageBackendAdmin',
           level: 1,
           children: [],
         },
@@ -241,130 +253,141 @@ const renderMenu = (t) => {
     {
       path: '/network',
       name: t('Network'),
-      key: '/network',
+      key: '/networkAdmin',
       icon: <GlobalOutlined />,
       children: [
         {
           path: '/network/networks-admin',
           name: t('Networks'),
-          key: '/network/networks',
+          key: 'networkAdmin',
           level: 1,
           children: [
             {
               path: /^\/network\/networks-admin\/detail\/.[^/]+$/,
               name: t('Network Detail'),
-              key: 'network_detail',
+              key: 'networkDetailAdmin',
               level: 2,
+              routePath: '/network/networks-admin/detail/:id',
             },
           ],
         },
         {
           path: '/network/virtual_adapter_admin',
           name: t('Virtual Adapter'),
-          key: '/network/virtual_adapter_admin',
+          key: 'virtualAdapterAdmin',
           level: 1,
           children: [
             {
               path: /^\/network\/virtual_adapter_admin\/detail\/.[^/]+$/,
               name: t('Virtual Adapter Detail'),
-              key: 'virtual_adapter-detail',
+              key: 'virtualAdapterDetailAdmin',
               level: 2,
+              routePath: '/network/virtual_adapter_admin/detail/:id',
             },
           ],
         },
         {
           path: '/network/qos-policy-admin',
           name: t('QoS Policy'),
-          key: '/network/qos-policy-admin',
+          key: 'networkQosAdmin',
           level: 1,
           children: [
             {
               path: /^\/network\/qos-policy-admin\/detail\/.[^/]+$/,
               name: t('QoS Policy Detail'),
-              key: 'qos-policy-detail',
+              key: 'networkQosDetailAdmin',
               level: 2,
+              routePath: '/network/qos-policy-admin/detail/:id',
             },
           ],
         },
         {
           path: '/network/router-admin',
           name: t('Routers'),
-          key: '/network/router-admin',
+          key: 'routerAdmin',
           level: 1,
           children: [
             {
               path: /^\/network\/router-admin\/detail\/.[^/]+$/,
               name: t('Router Detail'),
-              key: 'router-detail',
+              key: 'routerDetailAdmin',
               level: 2,
+              routePath: '/network/router-admin/detail/:id',
             },
             {
               path: /^\/network\/router-admin\/.[^/]+\/port\/.[^/]+$/,
               name: t('Port Detail'),
-              key: 'port-detail',
+              key: 'routerPortDetailAdmin',
               level: 2,
+              routePath: '/network/router-admin/:routerId/port/:id',
             },
           ],
         },
         {
           path: '/network/floatingip-admin',
           name: t('Floating IPs'),
-          key: '/network/floatingip-admin',
+          key: 'fipAdmin',
           level: 1,
           children: [
             {
               path: /^\/network\/floatingip-admin\/detail\/.[^/]+$/,
               name: t('Floating Ip Detail'),
-              key: 'floatingip-detail',
+              key: 'fipDetailAdmin',
               level: 2,
+              routePath: '/network/floatingip-admin/detail/:id',
             },
           ],
         },
         {
           path: '/network/load-balancers-admin',
           name: t('Load Balancers'),
-          key: '/network/load-balancers-admin',
+          key: 'lbAdmin',
           level: 1,
           children: [
             {
               path: /^\/network\/load-balancers-admin\/detail\/.[^/]+$/,
               name: t('Load Balancer Detail'),
-              key: 'load-balancer-detail',
+              key: 'lbDetailAdmin',
               level: 2,
+              routePath: '/network/load-balancers-admin/detail/:id',
             },
             {
               path: /^\/network\/load-balancers-admin\/.[^/]+\/listener\/.[^/]+$/,
               name: t('Listener Detail'),
-              key: 'listener-detail',
+              key: 'lbListenerDetailAdmin',
               level: 2,
+              routePath:
+                '/network/load-balancers-admin/:loadBalancerId/listener/:id',
             },
           ],
         },
         {
           path: '/network/vpn-admin',
           name: t('VPN'),
-          key: '/network/vpn-admin',
+          key: 'vpnAdmin',
           level: 1,
           children: [
             {
               path: /^\/network\/ipsec-site-connection-admin\/detail\/.[^/]+$/,
               name: t('IPsec site connection Detail'),
-              key: 'ipsec-site-connection-detail',
+              key: 'ipsecDetailAdmin',
               level: 2,
+              routePath: '/network/ipsec-site-connection-admin/detail/:id',
             },
           ],
         },
         {
           path: '/network/security-group-admin',
           name: t('Security Groups'),
-          key: '/network/security-group',
+          key: 'securityGroupAdmin',
           level: 1,
           children: [
             {
               path: /^\/network\/security-group-admin\/detail\/.[^/]+$/,
               name: t('Security Group Detail'),
-              key: 'security-group-detail',
+              key: 'securityGroupDetailAdmin',
               level: 2,
+              routePath: '/network/security-group-admin/detail/:id',
             },
           ],
         },
@@ -379,118 +402,127 @@ const renderMenu = (t) => {
         {
           path: '/identity/domain-admin',
           name: t('Domains'),
-          key: '/identity/domain',
+          key: 'domainAdmin',
           level: 1,
           children: [
             {
               path: '/identity/domain-admin/create',
               name: t('Create Domain'),
-              key: 'domain-create',
+              key: 'domainCreateAdmin',
               level: 2,
             },
             {
               path: /^\/identity\/domain-admin\/edit\/.[^/]+$/,
               name: t('Domain Edit'),
-              key: 'domain-edit',
+              key: 'domainEditAdmin',
               level: 2,
+              routePath: '/identity/domain-admin/edit/:id',
             },
             {
               path: /^\/identity\/domain-admin\/detail\/.[^/]+$/,
               name: t('Domain Detail'),
-              key: 'domain-detail',
+              key: 'domainDetailAdmin',
               level: 2,
+              routePath: '/identity/domain-admin/detail/:id',
             },
           ],
         },
         {
           path: '/identity/project-admin',
           name: t('Projects'),
-          key: '/identity/project',
+          key: 'projectAdmin',
           level: 1,
           children: [
             {
               path: /^\/identity\/project-admin\/detail\/.[^/]+$/,
               name: t('Project Detail'),
-              key: 'project-detail',
+              key: 'projectDetailAdmin',
               level: 2,
+              routePath: '/identity/project-admin/detail/:id',
             },
             {
               path: '/identity/project-admin/create',
               name: t('Create Project'),
-              key: 'project-create',
+              key: 'projectCreateAdmin',
               level: 2,
             },
             {
               path: /^\/identity\/project-admin\/edit\/.[^/]+$/,
               name: t('Edit Project'),
-              key: 'project-edit',
+              key: 'projectEditAdmin',
               level: 2,
+              routePath: '/identity/project-admin/edit/:id',
             },
           ],
         },
         {
           path: '/identity/user-admin',
           name: t('Users'),
-          key: '/identity/user',
+          key: 'userAdmin',
           level: 1,
           children: [
             {
               path: /^\/identity\/user-admin\/detail\/.[^/]+$/,
               name: t('User Detail'),
-              key: 'user-detail',
+              key: 'userDetailAdmin',
               level: 2,
+              routePath: '/identity/user-admin/detail/:id',
             },
             {
               path: '/identity/user-admin/create',
               name: t('Create User'),
-              key: 'user-create',
+              key: 'userCreateAdmin',
               level: 2,
             },
             {
               path: /^\/identity\/user-admin\/edit\/.[^/]+$/,
               name: t('User Edit'),
-              key: 'user-edit',
+              key: 'userEditAdmin',
               level: 2,
+              routePath: '/identity/user-admin/edit/:id',
             },
           ],
         },
         {
           path: '/identity/user-group-admin',
           name: t('User Groups'),
-          key: '/identity/user-group',
+          key: 'userGroupAdmin',
           level: 1,
           children: [
             {
               path: /^\/identity\/user-group-admin\/detail\/.[^/]+$/,
               name: t('User Group Detail'),
-              key: 'project-detail',
+              key: 'userGroupDetailAdmin',
               level: 2,
+              routePath: '/identity/user-group-admin/detail/:id',
             },
             {
               path: '/identity/user-group-admin/create',
               name: t('Create User Group'),
-              key: 'user-group-create',
+              key: 'userGroupCreateAdmin',
               level: 2,
             },
             {
               path: /^\/identity\/user-group-admin\/edit\/.[^/]+$/,
               name: t('Edit User Group'),
-              key: 'user-group-edit',
+              key: 'userGroupEditAdmin',
               level: 2,
+              routePath: '/identity/user-group-admin/edit/:id',
             },
           ],
         },
         {
           path: '/identity/role-admin',
           name: t('Roles'),
-          key: '/identity/role-admin',
+          key: 'roleAdmin',
           level: 1,
           children: [
             {
               path: /^\/identity\/role-admin\/detail\/.[^/]+$/,
               name: t('Role Detail'),
-              key: 'role-detail',
+              key: 'roleDetailAdmin',
               level: 2,
+              routePath: '/identity/role-admin/detail/:id',
             },
           ],
         },
@@ -505,14 +537,15 @@ const renderMenu = (t) => {
     //     {
     //       path: '/management/recycle-bin-admin',
     //       name: t('Recycle Bin'),
-    //       key: '/management/recycle-bin-admin',
+    //       key: 'recycleBinAdmin',
     //       level: 1,
     //       children: [
     //         {
     //           path: /^\/management\/recycle-bin-admin\/detail\/.[^/]+$/,
     //           name: t('Instance Detail'),
-    //           key: 'recycle-bin-detail',
+    //           key: 'recycleBinDetailAdmin',
     //           level: 2,
+    //           routePath: '/management/recycle-bin-admin/detail/:id',
     //         },
     //       ],
     //     },
@@ -521,32 +554,34 @@ const renderMenu = (t) => {
     {
       path: '/heat',
       name: t('Orchestration'),
-      key: '/heat',
+      key: 'heatAdmin',
       icon: <AppstoreOutlined />,
       children: [
         {
           path: '/heat/stack-admin',
           name: t('Stacks'),
-          key: '/heat/stack-admin',
+          key: 'stackAdmin',
           level: 1,
           children: [
             {
               path: /^\/heat\/stack-admin\/detail\/.[^/]+\/.[^/]+$/,
               name: t('Stack Detail'),
-              key: 'stack-detail',
+              key: 'stackDetailAdmin',
               level: 2,
+              routePath: '/heat/stack-admin/detail/:id/:name',
             },
             {
               path: '/heat/stack-admin/create',
               name: t('Create Stack'),
-              key: 'stack-create',
+              key: 'stackCreateAdmin',
               level: 2,
             },
             {
               path: /^\/heat\/stack-admin\/edit\/.[^/]+\/.[^/]+$/,
               name: t('Update Template'),
-              key: 'stack-edit',
+              key: 'stackEditAdmin',
               level: 2,
+              routePath: '/heat/stack-admin/edit/:id/:name',
             },
           ],
         },
@@ -555,40 +590,42 @@ const renderMenu = (t) => {
     {
       path: '/configuration-admin',
       name: t('Global Setting'),
-      key: '/configuration-admin',
+      key: 'configurationAdmin',
       icon: <SettingOutlined />,
       children: [
         {
           path: '/configuration-admin/info',
           name: t('System Info'),
-          key: '/configuration-admin/info',
+          key: 'systemInfoAdmin',
           level: 1,
           children: [
             {
               path: /^\/configuration-admin\/neutron\/detail\/.[^/]+$/,
               name: t('Neutron Agent Detail'),
-              key: 'neutron-detail',
+              key: 'neutronAgentDetailAdmin',
               level: 2,
+              routePath: '/configuration-admin/neutron/detail/:id',
             },
           ],
         },
         {
           path: '/configuration-admin/setting',
           name: t('System Config'),
-          key: '/configuration-admin/setting',
+          key: 'settingAdmin',
           level: 1,
         },
         {
           path: '/configuration-admin/metadata',
           name: t('Metadata Definitions'),
-          key: '/configuration-admin/metadata',
+          key: 'metadataAdmin',
           level: 1,
           children: [
             {
               path: /^\/configuration-admin\/metadata\/detail\/.[^/]+$/,
               name: t('Metadata Detail'),
-              key: 'metadata-detail',
+              key: 'metadataDetailAdmin',
               level: 2,
+              routePath: '/configuration-admin/metadata/detail/:id',
             },
           ],
         },

src/layouts/menu.jsx

@@ -30,7 +30,7 @@ const renderMenu = (t) => {
     {
       path: '/base/overview',
       name: t('Home'),
-      key: '/home',
+      key: 'overview',
       icon: <HomeOutlined />,
       level: 0,
       hasBreadcrumb: false,
@@ -39,31 +39,32 @@ const renderMenu = (t) => {
     {
       path: '/compute',
       name: t('Compute'),
-      key: '/compute',
+      key: 'compute',
       icon: <DesktopOutlined />,
       children: [
         {
           path: '/compute/instance',
           name: t('Instance'),
-          key: '/compute/instance',
+          key: 'instance',
           level: 1,
           children: [
             {
               path: /^\/compute\/instance\/detail\/.[^/]+$/,
               name: t('Instance Detail'),
-              key: 'instance-detail',
+              key: 'instanceDetail',
               level: 2,
+              routePath: '/compute/instance/detail/:id',
             },
             {
               path: '/compute/instance/create',
               name: t('Create Instance'),
-              key: 'instance-create',
+              key: 'instanceCreate',
               level: 2,
             },
             {
               path: '/compute/ironic-instance/create',
               name: t('Create Ironic Instance'),
-              key: 'ironic-instance-create',
+              key: 'ironicCreate',
               level: 2,
             },
           ],
@@ -71,47 +72,50 @@ const renderMenu = (t) => {
         {
           path: '/compute/flavor',
           name: t('Flavor'),
-          key: '/compute/flavor',
+          key: 'flavor',
           level: 1,
           children: [
             {
               path: /^\/compute\/flavor\/detail\/.[^/]+$/,
               name: t('Flavor Detail'),
-              key: 'flavor-detail',
+              key: 'flavorDetail',
               level: 2,
+              routePath: '/compute/flavor/detail/:id',
             },
           ],
         },
         {
           path: '/compute/server-group',
           name: t('Server Group'),
-          key: '/compute/server-group',
+          key: 'serverGroup',
           level: 1,
           children: [
             {
               path: /^\/compute\/server-group\/detail\/.[^/]+$/,
               name: t('Server Group Detail'),
-              key: 'server-group-detail',
+              key: 'serverGroupDetail',
               level: 2,
+              routePath: '/compute/server-group/detail/:id',
             },
           ],
         },
         {
           path: '/compute/image',
           name: t('Image'),
-          key: '/compute/image',
+          key: 'image',
           level: 1,
           children: [
             {
               path: /^\/compute\/image\/detail\/.[^/]+$/,
               name: t('Image Detail'),
-              key: 'image-detail',
+              key: 'imageDetail',
               level: 2,
+              routePath: '/compute/image/detail/:id',
             },
             {
               path: '/compute/image/create',
               name: t('Create Image'),
-              key: 'image-create',
+              key: 'imageCreate',
               level: 2,
             },
           ],
@@ -119,14 +123,15 @@ const renderMenu = (t) => {
         {
           path: '/compute/keypair',
           name: t('Key Pairs'),
-          key: '/compute/keypair',
+          key: 'keypair',
           level: 1,
           children: [
             {
               path: /^\/compute\/keypair\/detail\/.[^/]*$/,
               name: t('Keypair Detail'),
-              key: 'keypair-detail',
+              key: 'keypairDetail',
               level: 2,
+              routePath: '/compute/keypair/detail/:id',
             },
           ],
         },
@@ -135,54 +140,57 @@ const renderMenu = (t) => {
     {
       path: '/storage',
       name: t('Storage'),
-      key: '/storage',
+      key: 'storage',
       icon: <DatabaseOutlined />,
       children: [
         {
           path: '/storage/volume',
           name: t('Volume'),
-          key: '/storage/volume',
+          key: 'volume',
           level: 1,
           children: [
             {
               path: '/storage/volume/create',
               name: t('Create Volume'),
-              key: 'volume-create',
+              key: 'volumeCreate',
               level: 2,
             },
             {
               path: /^\/storage\/volume\/detail\/.[^/]+$/,
               name: t('Volume Detail'),
-              key: 'volume-detail',
+              key: 'volumeDetail',
               level: 2,
+              routePath: '/storage/volume/detail/:id',
             },
           ],
         },
         {
           path: '/storage/backup',
           name: t('Backups'),
-          key: '/storage/backup',
+          key: 'backup',
           level: 1,
           children: [
             {
               path: /^\/storage\/backup\/detail\/.[^/]+$/,
               name: t('Backup Detail'),
-              key: 'backup-detail',
+              key: 'backupDetail',
               level: 2,
+              routePath: '/storage/backup/detail/:id',
             },
           ],
         },
         {
           path: '/storage/snapshot',
           name: t('Volume Snapshot'),
-          key: '/storage/snapshot',
+          key: 'snapshot',
           level: 1,
           children: [
             {
               path: /^\/storage\/snapshot\/detail\/.[^/]+$/,
               name: t('Snapshot Detail'),
-              key: 'snapshot-detail',
+              key: 'snapshotDetail',
               level: 2,
+              routePath: '/storage/snapshot/detail/:id',
             },
           ],
         },
@@ -197,137 +205,147 @@ const renderMenu = (t) => {
         {
           path: '/network/networks',
           name: t('Networks'),
-          key: '/network/networks',
+          key: 'network',
           level: 1,
           children: [
             {
               path: /^\/network\/networks\/detail\/.[^/]+$/,
               name: t('Network Detail'),
-              key: 'network_detail',
+              key: 'networkDetail',
               level: 2,
+              routePath: '/network/networks/detail/:id',
             },
           ],
         },
         {
           path: '/network/virtual_adapter',
           name: t('Virtual Adapter'),
-          key: '/network/virtual_adapter',
+          key: 'virtualAdapter',
           level: 1,
           children: [
             {
               path: /^\/network\/virtual_adapter\/detail\/.[^/]+$/,
               name: t('Virtual Adapter Detail'),
-              key: 'virtual_adapter-detail',
+              key: 'virtualAdapterDetail',
               level: 2,
+              routePath: '/network/virtual_adapter/detail/:id',
             },
           ],
         },
         {
           path: '/network/qos-policy',
           name: t('QoS Policy'),
-          key: '/network/qos-policy',
+          key: 'networkQos',
           level: 1,
           children: [
             {
               path: /^\/network\/qos-policy\/detail\/.[^/]+$/,
               name: t('QoS Policy Detail'),
-              key: 'qos-policy-detail',
+              key: 'networkQosDetail',
               level: 2,
+              routePath: '/network/qos-policy/detail/:id',
             },
           ],
         },
         {
           path: '/network/router',
           name: t('Routers'),
-          key: '/network/router',
+          key: 'router',
           level: 1,
           children: [
             {
               path: /^\/network\/router\/detail\/.[^/]+$/,
               name: t('Router Detail'),
-              key: 'router-detail',
+              key: 'routerDetail',
               level: 2,
+              routePath: '/network/router/detail/:id',
             },
             {
               path: /^\/network\/router\/.[^/]+\/port\/.[^/]+$/,
               name: t('Port Detail'),
-              key: 'port-detail',
+              key: 'routerPortDetail',
               level: 2,
+              routePath: '/network/router/:routerId/port/:id',
             },
           ],
         },
         {
           path: '/network/floatingip',
           name: t('Floating IPs'),
-          key: '/network/floatingip',
+          key: 'floatingip',
           level: 1,
           children: [
             {
               path: /^\/network\/floatingip\/detail\/.[^/]+$/,
               name: t('Floating Ip Detail'),
-              key: 'floatingip-detail',
+              key: 'fipDetail',
               level: 2,
+              routePath: '/network/floatingip/detail/:id',
             },
           ],
         },
         {
           path: '/network/topo',
           name: t('Topology'),
-          key: '/network/topo',
+          key: 'networkTopo',
           level: 1,
           children: [],
         },
         {
           path: '/network/load-balancers',
           name: t('Load Balancers'),
-          key: '/network/load-balancers',
+          key: 'lb',
           level: 1,
           children: [
             {
               path: '/network/load-balancers/create',
               name: t('Create Loadbalancer'),
-              key: 'load-balancer-create',
+              key: 'lbCreate',
               level: 2,
             },
             {
               path: /^\/network\/load-balancers\/detail\/.[^/]+$/,
               name: t('Load Balancer Detail'),
-              key: 'load-balancer-detail',
+              key: 'lbDetail',
               level: 2,
+              routePath: '/network/load-balancers/detail/:id',
             },
             {
               path: /^\/network\/load-balancers\/.[^/]+\/listener\/.[^/]+$/,
               name: t('Listener Detail'),
-              key: 'listener-detail',
+              key: 'lbListenerDetail',
               level: 2,
+              routePath: '/network/load-balancers/:loadBalancerId/listener/:id',
             },
           ],
         },
         {
           path: '/network/vpn',
           name: t('VPN'),
-          key: '/network/vpn',
+          key: 'vpn',
           level: 1,
           children: [
             {
               path: /^\/network\/ipsec-site-connection\/detail\/.[^/]+$/,
               name: t('IPsec site connection Detail'),
-              key: 'ipsec-site-connection-detail',
+              key: 'ipsecDetail',
               level: 2,
+              routePath: '/network/ipsec-site-connection/detail/:id',
             },
           ],
         },
         {
           path: '/network/security-group',
           name: t('Security Groups'),
-          key: '/network/security-group',
+          key: 'securityGroup',
           level: 1,
           children: [
             {
               path: /^\/network\/security-group\/detail\/.[^/]+$/,
               name: t('Security Group Detail'),
-              key: 'security-group-detail',
+              key: 'securityGroupDetail',
               level: 2,
+              routePath: '/network/security-group/detail/:id',
             },
           ],
         },
@@ -342,14 +360,15 @@ const renderMenu = (t) => {
     //     {
     //       path: '/management/recycle-bin',
     //       name: t('Recycle Bin'),
-    //       key: '/management/recycle-bin',
+    //       key: 'recycleBin',
     //       level: 1,
     //       children: [
     //         {
     //           path: /^\/management\/recycle-bin\/detail\/.[^/]+$/,
     //           name: t('Instance Detail'),
-    //           key: 'recycle-bin-detail',
+    //           key: 'recycleBinDetail',
     //           level: 2,
+    //           routePath: '/management/recycle-bin/detail/:id',
     //         },
     //       ],
     //     },
@@ -358,32 +377,34 @@ const renderMenu = (t) => {
     {
       path: '/heat',
       name: t('Orchestration'),
-      key: '/heat',
+      key: 'heat',
       icon: <AppstoreOutlined />,
       children: [
         {
           path: '/heat/stack',
           name: t('Stacks'),
-          key: '/heat/stack',
+          key: 'stack',
           level: 1,
           children: [
             {
               path: /^\/heat\/stack\/detail\/.[^/]+\/.[^/]+$/,
               name: t('Stack Detail'),
-              key: 'stack-detail',
+              key: 'stackDetail',
               level: 2,
+              routePath: '/heat/stack/detail/:id/:name',
             },
             {
               path: '/heat/stack/create',
               name: t('Create Stack'),
-              key: 'stack-create',
+              key: 'stackCreate',
               level: 2,
             },
             {
               path: /^\/heat\/stack\/edit\/.[^/]+\/.[^/]+$/,
               name: t('Update Template'),
-              key: 'stack-edit',
+              key: 'stackEdit',
               level: 2,
+              routePath: '/heat/stack/edit/:id/:name',
             },
           ],
         },

src/pages/compute/containers/BareMetalNode/Detail/index.jsx

@@ -34,7 +34,7 @@ export default class Detail extends Base {
   }
 
   get listUrl() {
-    return '/compute/baremetal-node-admin';
+    return this.getRoutePath('baremetalNode');
   }
 
   get actionConfigs() {

src/pages/compute/containers/BareMetalNode/actions/Create/index.jsx

@@ -42,7 +42,7 @@ export default class Create extends StepAction {
   }
 
   get listUrl() {
-    return '/compute/baremetal-node-admin';
+    return this.getRoutePath('baremetalNode');
   }
 
   get name() {

src/pages/compute/containers/BareMetalNode/actions/Edit.jsx

@@ -27,7 +27,7 @@ export default class Edit extends Create {
   static path = (item) => `/compute/baremetal-node-admin/edit/${item.uuid}`;
 
   get listUrl() {
-    return '/compute/baremetal-node-admin';
+    return this.getRoutePath('baremetalNode');
   }
 
   get name() {

src/pages/compute/containers/BareMetalNode/index.jsx

@@ -54,8 +54,7 @@ export default class BareMetalNode extends Base {
     {
       title: t('Node ID/Name'),
       dataIndex: 'name',
-      idKey: 'uuid',
+      routerName: 'baremetalNodeDetail',
-      linkPrefix: '/compute/baremetal-node-admin/detail',
     },
     {
       title: t('Ironic Instance Name'),

src/pages/compute/containers/Flavor/Detail/index.jsx

@@ -32,7 +32,7 @@ export class Detail extends Base {
   }
 
   get listUrl() {
-    return this.getUrl('/compute/flavor');
+    return this.getRoutePath('flavor');
   }
 
   get actionConfigs() {

src/pages/compute/containers/Flavor/actions/StepCreate/index.jsx

@@ -50,10 +50,8 @@ class StepCreate extends StepAction {
 
   get listUrl() {
     const { architecture } = this.values || {};
-    if (architecture) {
+    const tab = architecture || this.tab;
-      return `/compute/flavor-admin?tab=${architecture}`;
+    return this.getRoutePath('flavor', null, { tab });
-    }
-    return `/compute/flavor-admin?tab=${this.tab}`;
   }
 
   get name() {
@@ -126,7 +124,7 @@ class StepCreate extends StepAction {
       ram: memoryGb * 1024,
       disk: 0,
     };
-    const isPublic = accessType === 'public'
+    const isPublic = accessType === 'public';
     body['os-flavor-access:is_public'] = isPublic;
     if (categoryHasEphemeral) {
       body['OS-FLV-EXT-DATA:ephemeral'] = ephemeral;

src/pages/compute/containers/Hypervisors/Hypervisor/Detail/index.jsx

@@ -29,7 +29,7 @@ export class HypervisorDetail extends Base {
   }
 
   get listUrl() {
-    return '/compute/hypervisors-admin';
+    return this.getRoutePath('hypervisor');
   }
 
   get detailInfos() {

src/pages/compute/containers/Hypervisors/Hypervisor/index.jsx

@@ -47,8 +47,8 @@ export class Hypervisors extends Base {
     columns[0] = {
       title: t('ID/Name'),
       dataIndex: 'hypervisor_hostname',
-      linkPrefix: '/compute/hypervisors-admin/detail',
+      routeName: 'hypervisorDetailAdmin',
-      isName: true,
+      isLink: true,
     };
     return columns;
   };

src/pages/compute/containers/Image/Detail/BaseDetail.jsx

@@ -12,13 +12,11 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React from 'react';
 import { toJS } from 'mobx';
 import { inject, observer } from 'mobx-react';
 import { imageProperties, imageVisibility, imageOS } from 'resources/image';
 import Base from 'containers/BaseDetail';
 import { isObject, isArray } from 'lodash';
-import { Link } from 'react-router-dom';
 
 export class BaseDetail extends Base {
   get isImageDetail() {
@@ -122,15 +120,14 @@ export class BaseDetail extends Base {
             return '-';
           }
           if (value.server_name) {
-            return (
+            const { server_id, server_name } = value;
-              <Link
+            const link = this.getLinkRender(
-                to={`${this.getUrl('/compute/instance')}/detail/${
+              'instanceDetail',
-                  value.server_id
+              server_name,
-                }?tab=snapshots`}
+              { id: server_id },
-              >
+              { tab: 'snapshots' }
-                {value.server_name}
-              </Link>
             );
+            return link;
           }
           return value.server_id;
         },

src/pages/compute/containers/Image/Detail/index.jsx

@@ -34,7 +34,7 @@ export class ImageDetail extends Base {
   }
 
   get listUrl() {
-    return this.getUrl('/compute/image');
+    return this.getRoutePath('image');
   }
 
   get actionConfigs() {

src/pages/compute/containers/Image/Image.jsx

@@ -120,7 +120,7 @@ export class Image extends Base {
     {
       title: t('ID/Name'),
       dataIndex: 'name',
-      linkPrefix: `/compute/${this.getUrl('image')}/detail`,
+      routeName: this.getRouteName('imageDetail'),
     },
     {
       title: t('Project ID/Name'),

src/pages/compute/containers/Image/actions/Create.jsx

@@ -46,7 +46,7 @@ export class CreateForm extends FormAction {
   };
 
   get listUrl() {
-    return this.getUrl('/compute/image');
+    return this.getRoutePath('image');
   }
 
   get name() {

src/pages/compute/containers/Instance/Detail/BaseDetail/index.jsx

@@ -146,7 +146,7 @@ export class BaseDetail extends Base {
   get imageCard() {
     const item = this.detailData.itemInList || {};
     const { image, image_name } = item;
-    const url = `${this.getUrl('/compute/image')}/detail/${image}`;
+    const url = this.getRoutePath('imageDetail', { id: image });
     const options = [
       {
         label: t('Name'),

src/pages/compute/containers/Instance/Detail/SecurityGroup/index.jsx

@@ -34,6 +34,7 @@ import { CaretRightOutlined } from '@ant-design/icons';
 import ItemActionButtons from 'components/Tables/Base/ItemActionButtons';
 import { getSelfColumns } from 'resources/security-group-rule';
 import { isAdminPage } from 'utils/index';
+import { getPath } from 'utils/route-map';
 import styles from './index.less';
 import Detach from './action/Detach';
 import ManageSecurityGroup from './action/ManageSecurityGroup';
@@ -68,12 +69,11 @@ export class SecurityGroup extends React.Component {
     return !this.isAdminPage;
   }
 
-  getUrl(path, adminStr) {
-    return this.isAdminPage ? `${path}${adminStr || '-admin'}` : path;
-  }
-
   getDetailUrl(id) {
-    return `${this.getUrl('/network/security-group')}/detail/${id}`;
+    const key = this.isAdminPage
+      ? 'securityGroupDetailAdmin'
+      : 'securityGroupDetail';
+    return getPath({ key, params: { id } });
   }
 
   actionCallback = async (first) => {

src/pages/compute/containers/Instance/Detail/index.jsx

@@ -46,9 +46,9 @@ export class InstanceDetail extends Base {
 
   get listUrl() {
     if (this.isRecycleBinDetail) {
-      return this.getUrl('/management/recycle-bin');
+      return this.getRoutePath('recycleBin');
     }
-    return this.getUrl('/compute/instance');
+    return this.getRoutePath('instance');
   }
 
   get actionConfigs() {
@@ -63,9 +63,8 @@ export class InstanceDetail extends Base {
   get detailData() {
     const { id, status } = this.store.detail;
     if (id && status === 'soft_deleted' && !this.isRecycleBinDetail) {
-      this.routing.push(
+      const path = this.getRoutePath('recycleBinDetail', { id });
-        `${this.getUrl('/management/recycle-bin')}/detail/${id}`
+      this.routing.push(path);
-      );
     }
     return toJS(this.store.detail) || {};
   }

src/pages/compute/containers/Instance/actions/CreateIronic/index.jsx

@@ -88,15 +88,15 @@ export class CreateIronic extends StepAction {
   get listUrl() {
     const { image, volume, servergroup } = this.locationParams;
     if (image) {
-      return '/compute/image';
+      return this.getRoutePath('image');
     }
     if (volume) {
-      return '/storage/volume';
+      return this.getRoutePath('volume');
     }
     if (servergroup) {
-      return `/compute/server-group/detail/${servergroup}`;
+      return this.getRoutePath('serverGroupDetail', { id: servergroup });
     }
-    return '/compute/instance';
+    return this.getRoutePath('instance');
   }
 
   get checkEndpoint() {

src/pages/compute/containers/Instance/actions/StepCreate/index.jsx

@@ -83,15 +83,15 @@ export class StepCreate extends StepAction {
   get listUrl() {
     const { image, volume, servergroup } = this.locationParams;
     if (image) {
-      return '/compute/image';
+      return this.getRoutePath('image');
     }
     if (volume) {
-      return '/storage/volume';
+      return this.getRoutePath('volume');
     }
     if (servergroup) {
-      return `/compute/server-group/detail/${servergroup}`;
+      return this.getRoutePath('serverGroupDetail', { id: servergroup });
     }
-    return '/compute/instance';
+    return this.getRoutePath('instance');
   }
 
   get hasConfirmStep() {

src/pages/compute/containers/Instance/index.jsx

@@ -131,7 +131,7 @@ export class Instance extends Base {
       {
         title: t('ID/Name'),
         dataIndex: 'name',
-        linkPrefix: `/compute/${this.getUrl('instance')}/detail`,
+        routeName: this.getRouteName('instanceDetail'),
         sortKey: 'display_name',
       },
       {

src/pages/compute/containers/Keypair/Detail/index.jsx

@@ -30,7 +30,7 @@ export default class KeypairDetail extends Base {
   }
 
   get listUrl() {
-    return '/compute/keypair';
+    return this.getRoutePath('keypair');
   }
 
   get actionConfigs() {

src/pages/compute/containers/Keypair/index.jsx

@@ -12,11 +12,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React from 'react';
 import { observer, inject } from 'mobx-react';
 import Base from 'containers/List';
 import keypairStore from 'stores/nova/keypair';
-import { Link } from 'react-router-dom';
 import actionConfigs from './actions';
 
 @inject('rootStore')
@@ -50,14 +48,8 @@ export default class Keypair extends Base {
     {
       title: t('Name'),
       dataIndex: 'name',
-      render: (name, record) => {
+      idKey: 'name',
-        if (name) {
+      routeName: this.getRouteName('keypairDetail'),
-          return (
-            <Link to={`/compute/keypair/detail/${record.name}`}>{name}</Link>
-          );
-        }
-        return '-';
-      },
     },
     {
       title: t('Fingerprint'),

src/pages/compute/containers/ServerGroup/Detail/index.jsx

@@ -31,7 +31,7 @@ export default class ServerGroupDetail extends Base {
   }
 
   get listUrl() {
-    return this.getUrl('/compute/server-group');
+    return this.getRoutePath('serverGroup');
   }
 
   get actionConfigs() {

src/pages/compute/containers/ServerGroup/index.jsx

@@ -44,7 +44,7 @@ export default class ServerGroup extends Base {
     {
       title: t('ID/Name'),
       dataIndex: 'name',
-      linkPrefix: `/compute/${this.getUrl('server-group')}/detail`,
+      routeName: this.getRouteName('serverGroupDetail'),
     },
     {
       title: t('Project ID/Name'),

src/pages/configuration/containers/Metadata/Detail/index.jsx

@@ -30,7 +30,7 @@ export default class MetadataDetail extends Base {
   }
 
   get listUrl() {
-    return '/configuration-admin/metadata';
+    return this.getRoutePath('metadata');
   }
 
   get actionConfigs() {

src/pages/configuration/containers/SystemInfo/NeutronAgent/Detail/index.jsx

@@ -36,7 +36,7 @@ export default class KeypairDetail extends Base {
   }
 
   get listUrl() {
-    return '/configuration-admin/info?tab=neutronAgent';
+    return this.getRoutePath('systemInfo', null, { tab: 'neutronAgent' });
   }
 
   get actionConfigs() {

src/pages/configuration/containers/SystemInfo/NeutronAgent/index.jsx

@@ -48,8 +48,8 @@ export default class NeutronAgent extends Base {
     {
       title: t('ID/Name'),
       dataIndex: 'binary',
-      isName: true,
+      isLink: true,
-      linkPrefix: '/configuration-admin/neutron/detail',
+      routeName: 'neutronAgentDetailAdmin',
     },
     {
       title: t('Type'),

src/pages/heat/containers/Stack/Detail/Resource.jsx

@@ -12,12 +12,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React from 'react';
 import { observer, inject } from 'mobx-react';
 import Base from 'containers/List';
 import { StackResourceStore } from 'stores/heat/resource';
 import { stackStatus } from 'resources/stack';
-import { Link } from 'react-router-dom';
 
 export class Resource extends Base {
   init() {
@@ -41,138 +39,112 @@ export class Resource extends Base {
       {
         key: 'OS::Cinder::EncryptedVolumeType',
         isAdmin: true,
-        getUrl: (value) =>
+        routeName: 'volumeTypeDetail',
-          `${this.getUrl('/storage/volume-type')}/detail/${value}`,
       },
       {
         key: 'OS::Cinder::QoSAssociation',
         isAdmin: true,
-        getUrl: (value) =>
+        routeName: 'volumeTypeQosDetail',
-          `${this.getUrl('/storage/volume-type')}/qos/detail/${value}`,
       },
       {
         key: 'OS::Cinder::QoSSpecs',
         isAdmin: true,
-        getUrl: (value) =>
+        routeName: 'volumeTypeQosDetail',
-          `${this.getUrl('/storage/volume-type')}/qos/detail/${value}`,
       },
       {
         key: 'OS::Cinder::Volume',
-        getUrl: (value) => `${this.getUrl('/storage/volume')}/detail/${value}`,
+        routeName: 'volumeDetail',
       },
       {
         key: 'OS::Cinder::VolumeType',
         isAdmin: true,
-        getUrl: (value) =>
+        routeName: 'volumeTypeDetail',
-          `${this.getUrl('/storage/volume-type')}/detail/${value}`,
       },
       {
         key: 'OS::Glance::WebImage',
-        getUrl: (value) => `${this.getUrl('/compute/image')}/detail/${value}`,
+        routeName: 'imageDetail',
-      },
-      {
-        key: 'OS::Glance::WebImage',
-        getUrl: (value) => `${this.getUrl('/compute/image')}/detail/${value}`,
       },
       {
         key: 'OS::Heat::Stack',
-        getUrl: (value) => `${this.getUrl('/heat/stack')}/detail/${value}`,
+        routeName: 'stackDetail',
       },
       {
         key: 'OS::Ironic::Port',
-        getUrl: (value) =>
+        routeName: 'virtualAdapterDetail',
-          `${this.getUrl(
-            '/network/virtual_adapter',
-            '_admin'
-          )}/detail/${value}`,
       },
       {
         key: 'OS::Keystone::Domain',
+        routeName: 'domainDetail',
         isAdmin: true,
-        getUrl: (value) => `${this.getUrl('/identity/domain')}/detail/${value}`,
       },
       {
         key: 'OS::Keystone::Group',
+        routeName: 'userGroupDetail',
         isAdmin: true,
-        getUrl: (value) =>
-          `${this.getUrl('/identity/user-group')}/detail/${value}`,
       },
       {
         key: 'OS::Keystone::Project',
+        routeName: 'projectDetail',
         isAdmin: true,
-        getUrl: (value) =>
-          `${this.getUrl('/identity/project')}/detail/${value}`,
       },
       {
         key: 'OS::Keystone::Role',
+        routeName: 'roleDetail',
         isAdmin: true,
-        getUrl: (value) => `${this.getUrl('/identity/role')}/detail/${value}`,
       },
       {
         key: 'OS::Keystone::User',
+        routeName: 'userDetail',
         isAdmin: true,
-        getUrl: (value) => `${this.getUrl('/identity/user')}/detail/${value}`,
       },
       {
         key: 'OS::Neutron::FloatingIP',
-        getUrl: (value) =>
+        routeName: 'fipDetail',
-          `${this.getUrl('/network/floatingip')}/detail/${value}`,
       },
       {
         key: 'OS::Neutron::LBaaS::LoadBalancer',
-        getUrl: (value) =>
+        routeName: 'lbDetail',
-          `${this.getUrl('/network/load-balancers')}/detail/${value}`,
       },
       {
         key: 'OS::Neutron::Net',
-        getUrl: (value) =>
+        routeName: 'networkDetail',
-          `${this.getUrl('/network/networks')}/detail/${value}`,
       },
       {
         key: 'OS::Neutron::Port',
-        getUrl: (value) =>
+        routeName: 'virtualAdapterDetail',
-          `${this.getUrl(
-            '/network/virtual_adapter',
-            '_admin'
-          )}/detail/${value}`,
       },
       {
         key: 'OS::Neutron::QoSPolicy',
-        getUrl: (value) =>
+        routeName: 'networkQosDetail',
-          `${this.getUrl('/network/qos-policy')}/detail/${value}`,
       },
       {
         key: 'OS::Neutron::Router',
-        getUrl: (value) => `${this.getUrl('/network/router')}/detail/${value}`,
+        routeName: 'routerDetail',
       },
       {
         key: 'OS::Neutron::SecurityGroup',
-        getUrl: (value) =>
+        routeName: 'securityGroupDetail',
-          `${this.getUrl('/network/security-group')}/detail/${value}`,
       },
       {
         key: 'OS::Nova::Flavor',
         isAdmin: true,
-        getUrl: (value) => `${this.getUrl('/compute/flavor')}/detail/${value}`,
+        routeName: 'flavorDetail',
       },
       {
         key: 'OS::Nova::KeyPair',
-        getUrl: (value) => `/compute/keypair/detail/${value}`,
+        routeName: 'keypairDetail',
       },
       {
         key: 'OS::Nova::Server',
-        getUrl: (value) =>
+        routeName: 'instanceDetail',
-          `${this.getUrl('/compute/instance')}/detail/${value}`,
       },
       {
         key: 'OS::Nova::ServerGroup',
-        getUrl: (value) =>
+        routeName: 'serverGroupDetail',
-          `${this.getUrl('/compute/server-group')}/detail/${value}`,
       },
       {
         key: 'OS::Octavia::LoadBalancer',
-        getUrl: (value) =>
+        routeName: 'lbDetail',
-          `${this.getUrl('/network/load-balancers')}/detail/${value}`,
       },
     ];
   }
@@ -186,16 +158,13 @@ export class Resource extends Base {
     if (!item) {
       return value;
     }
-    const { isAdmin, getUrl } = item;
+    const { isAdmin, routeName } = item;
+    const link = this.getLinkRender(routeName, value, { id: value });
     if (isAdmin) {
-      return this.isAdminPage ? (
+      return this.isAdminPage ? link : value;
-        <Link to={getUrl(value, record)}>{value}</Link>
-      ) : (
-        value
-      );
     }
-    if (getUrl) {
+    if (routeName) {
-      return <Link to={getUrl(value, record)}>{value}</Link>;
+      return link;
     }
     return value;
   };

src/pages/heat/containers/Stack/Detail/index.jsx

@@ -32,7 +32,7 @@ export class StackDetail extends Base {
   }
 
   get listUrl() {
-    return this.getUrl('/heat/stack');
+    return this.getRoutePath('stack');
   }
 
   init() {

src/pages/heat/containers/Stack/actions/Create/index.jsx

@@ -37,7 +37,7 @@ export class StepCreate extends StepAction {
   }
 
   get listUrl() {
-    return this.getUrl('/heat/stack');
+    return this.getRoutePath('stack');
   }
 
   get name() {

src/pages/heat/containers/Stack/actions/Edit.jsx

@@ -13,6 +13,7 @@
 // limitations under the License.
 
 import { inject, observer } from 'mobx-react';
+import { getPath } from 'utils/route-map';
 import Create from './Create';
 
 @inject('rootStore')
@@ -24,14 +25,13 @@ export default class Edit extends Create {
 
   static path = (item, containerProp) => {
     const { isAdminPage } = containerProp;
-    const prefix = isAdminPage
+    const key = isAdminPage ? 'stackEditAdmin' : 'stackEdit';
-      ? '/heat/stack-admin/edit/'
+    const { id, stack_name: name } = item;
-      : '/heat/stack/edit/';
+    return getPath({ key, params: { id, name } });
-    return `${prefix}${item.id}/${item.stack_name}`;
   };
 
   get listUrl() {
-    return this.getUrl('/heat/stack');
+    return this.getRoutePath('stack');
   }
 
   get name() {

src/pages/heat/containers/Stack/index.jsx

@@ -59,9 +59,14 @@ export class Stack extends Base {
     {
       title: t('ID/Name'),
       dataIndex: 'stack_name',
-      linkFunc: (value, record) =>
+      routeName: this.getRouteName('stackDetail'),
-        `/heat/${this.getUrl('stack')}/detail/${record.id}/${value}`,
+      routeParamsFunc: (data) => {
-      isName: true,
+        return {
+          id: data.id,
+          name: data.stack_name,
+        };
+      },
+      isLink: true,
     },
     {
       title: t('Project ID/Name'),

src/pages/identity/containers/Domain/Detail/index.jsx

@@ -31,7 +31,7 @@ export default class DomainDetail extends Base {
   }
 
   get listUrl() {
-    return '/identity/domain-admin';
+    return this.getRoutePath('domain');
   }
 
   get detailInfos() {

src/pages/identity/containers/Domain/actions/Create.jsx

@@ -37,7 +37,7 @@ class CreateForm extends FormAction {
   }
 
   get listUrl() {
-    return '/identity/domain-admin';
+    return this.getRoutePath('domain');
   }
 
   get name() {

src/pages/identity/containers/Domain/actions/Edit.jsx

@@ -46,7 +46,7 @@ class EditForm extends FormAction {
   }
 
   get listUrl() {
-    return '/identity/domain-admin';
+    return this.getRoutePath('domain');
   }
 
   get data() {

src/pages/identity/containers/Domain/index.jsx

@@ -43,8 +43,7 @@ export default class Domains extends Base {
     {
       title: t('Domain ID/Name'),
       dataIndex: 'name',
-      // isHideable: true,
+      routeName: 'domainDetailAdmin',
-      linkPrefix: '/identity/domain-admin/detail',
     },
     {
       title: t('Member Num'),

src/pages/identity/containers/Project/Detail/index.jsx

@@ -32,7 +32,7 @@ export class Detail extends Base {
   }
 
   get listUrl() {
-    return this.getUrl('/identity/project');
+    return this.getRoutePath('project');
   }
 
   get actionConfigs() {

src/pages/identity/containers/Project/index.jsx

@@ -66,7 +66,7 @@ export class Projects extends Base {
       {
         title: t('Project ID/Name'),
         dataIndex: 'name',
-        linkPrefix: `/identity/${this.getUrl('project')}/detail`,
+        routeName: 'projectDetailAdmin',
       },
       {
         title: t('Role'),

src/pages/identity/containers/Role/Detail/index.jsx

@@ -29,7 +29,7 @@ export class RoleDetail extends Base {
   }
 
   get listUrl() {
-    return '/identity/role-admin';
+    return this.getRoutePath('role');
   }
 
   init() {

src/pages/identity/containers/Role/index.jsx

@@ -12,8 +12,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React from 'react';
-import { Link } from 'react-router-dom';
 import { observer, inject } from 'mobx-react';
 import Base from 'containers/List';
 import globalRoleStore from 'stores/keystone/role';
@@ -45,15 +43,7 @@ export default class Role extends Base {
     {
       title: t('Role Name'),
       dataIndex: 'name',
-      linkPrefix: '/identity/role-admin/detail',
+      routeName: 'roleDetailAdmin',
-      render: (name, record) => {
-        if (name) {
-          return (
-            <Link to={`/identity/role-admin/detail/${record.id}`}>{name}</Link>
-          );
-        }
-        return '-';
-      },
     },
     {
       title: t('ID'),

src/pages/identity/containers/User/Detail/index.jsx

@@ -33,7 +33,7 @@ export class UserDetail extends Base {
   }
 
   get listUrl() {
-    return '/identity/user-admin';
+    return this.getRoutePath('user');
   }
 
   get actionConfigs() {

src/pages/identity/containers/User/actions/Create.jsx

@@ -93,7 +93,7 @@ export class CreateForm extends FormAction {
   }
 
   get listUrl() {
-    return '/identity/user-admin';
+    return this.getRoutePath('user');
   }
 
   get defaultValue() {

src/pages/identity/containers/User/index.jsx

@@ -81,7 +81,7 @@ export class User extends Base {
       {
         title: t('User ID/Name'),
         dataIndex: 'name',
-        linkPrefix: `/identity/${this.getUrl('user')}/detail`,
+        routeName: 'userDetailAdmin',
       },
       {
         title: t('Project Scope'),

src/pages/identity/containers/UserGroup/Detail/index.jsx

@@ -36,7 +36,7 @@ export default class Detail extends Base {
   }
 
   get listUrl() {
-    return '/identity/user-group-admin';
+    return this.getRoutePath('userGroup');
   }
 
   get actionConfigs() {

src/pages/identity/containers/UserGroup/index.jsx

@@ -51,7 +51,7 @@ export default class UserGroups extends Base {
       {
         title: t('User Group ID/Name'),
         dataIndex: 'name',
-        linkPrefix: '/identity/user-group-admin/detail',
+        routeName: 'userGroupDetailAdmin',
       },
       {
         title: t('Project Scope'),

src/pages/management/containers/RecycleBin/index.jsx

@@ -60,7 +60,7 @@ export default class RecycleBin extends Base {
     {
       title: t('ID/Name'),
       dataIndex: 'name',
-      linkPrefix: `/management/${this.getUrl('recycle-bin')}/detail`,
+      routeName: this.getRouteName('recycleBinDetail'),
       sortKey: 'display_name',
     },
     {

src/pages/network/containers/FloatingIp/Detail/BaseDetail.jsx

@@ -12,10 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React from 'react';
 import { inject, observer } from 'mobx-react';
 import { FloatingIpStore } from 'stores/neutron/floatingIp';
-import { Link } from 'react-router-dom';
 import Base from 'containers/BaseDetail';
 
 export class BaseDetail extends Base {
@@ -70,12 +68,11 @@ export class BaseDetail extends Base {
             if (router_name === '-' && network_name === '-') {
               return data;
             }
-            return (
+            const value = router_name ? `${data} (${router_name})` : data;
-              <Link to={`${this.getUrl('/network/router')}/detail/${data}`}>
+            const link = this.getLinkRender('routerDetail', value, {
-                {`${data}`}
+              id: data,
-                {router_name && `(${router_name})`}
+            });
-              </Link>
+            return link;
-            );
           }
           return '-';
         },

src/pages/network/containers/FloatingIp/Detail/index.jsx

@@ -31,7 +31,7 @@ export class FloatingIpDetail extends Base {
   }
 
   get listUrl() {
-    return this.getUrl('/network/floatingip');
+    return this.getRoutePath('floatingip');
   }
 
   get actionConfigs() {

src/pages/network/containers/FloatingIp/index.jsx

@@ -17,7 +17,6 @@ import { observer, inject } from 'mobx-react';
 import Base from 'containers/List';
 import { floatingIpStatus, transitionStatuses } from 'resources/floatingip';
 import { FloatingIpStore } from 'stores/neutron/floatingIp';
-import { Link } from 'react-router-dom';
 import { emptyActionConfig } from 'utils/constants';
 import { Col, Popover, Row } from 'antd';
 import { FileTextOutlined } from '@ant-design/icons';
@@ -122,17 +121,15 @@ export class FloatingIps extends Base {
       {
         title: t('ID/Floating IP'),
         dataIndex: 'floating_ip_address',
-        isName: true,
+        isLink: true,
-        linkPrefix: `/network/${this.getUrl('floatingip')}/detail`,
+        routeName: this.getRouteName('fipDetail'),
       },
       {
         title: t('QoS Policy'),
         dataIndex: 'qos_policy_id',
-        render: (value) => (
+        isLink: true,
-          <Link to={`/network/${this.getUrl('qos-policy')}/detail/${value}`}>
+        routeName: 'qosPolicyDetail',
-            {value}
+        idKey: 'qos_policy_id',
-          </Link>
-        ),
         hidden: !this.qosEndpoint,
       },
       {

src/pages/network/containers/LoadBalancers/Listener/Detail/index.jsx

@@ -32,8 +32,8 @@ export default class ListenerDetail extends Base {
   }
 
   get listUrl() {
-    const { loadBalancerId } = this.params;
+    const { loadBalancerId: id } = this.params;
-    return `/network/${this.getUrl('load-balancers')}/detail/${loadBalancerId}`;
+    return this.getRoutePath('lbDetail', { id });
   }
 
   get actionConfigs() {

src/pages/network/containers/LoadBalancers/Listener/index.jsx

@@ -61,11 +61,13 @@ export default class Listeners extends Base {
     {
       title: t('ID/Name'),
       dataIndex: 'name',
-      isName: true,
+      routeName: this.getRouteName('lbDetail'),
-      linkPrefix: `/network/${this.getUrl('load-balancers')}/${
+      routeParamsFunc: (data) => {
-        this.id
+        return {
-      }/listener/`,
+          loadBalancerId: this.id,
-      idKey: 'id',
+          id: data.id,
+        };
+      },
     },
     {
       title: t('Status'),

src/pages/network/containers/LoadBalancers/LoadBalancerInstance/Detail/index.jsx

@@ -42,7 +42,7 @@ export default class LoadBalancerDetail extends Base {
   };
 
   get listUrl() {
-    return this.getUrl('/network/load-balancers');
+    return this.getRoutePath('lb');
   }
 
   get actionConfigs() {

src/pages/network/containers/LoadBalancers/LoadBalancerInstance/actions/StepCreate/index.jsx

@@ -46,7 +46,7 @@ class StepCreate extends StepAction {
   }
 
   get listUrl() {
-    return '/network/load-balancers';
+    return this.getRoutePath('lb');
   }
 
   get hasConfirmStep() {

src/pages/network/containers/LoadBalancers/LoadBalancerInstance/index.jsx

@@ -89,9 +89,7 @@ export default class LoadBalancerInstance extends Base {
       {
         title: t('ID/Name'),
         dataIndex: 'name',
-        isName: true,
+        routeName: this.getRouteName('lbDetail'),
-        linkPrefix: `/network/${this.getUrl('load-balancers')}/detail/`,
-        idKey: 'id',
       },
       {
         title: t('Project ID/Name'),

src/pages/network/containers/Network/Detail/index.jsx

@@ -32,7 +32,7 @@ export class NetworkDetail extends Base {
   }
 
   get listUrl() {
-    return this.getUrl('/network/networks');
+    return this.getRoutePath('network');
   }
 
   get actionConfigs() {

src/pages/network/containers/QoSPolicy/Detail/index.jsx

@@ -30,7 +30,7 @@ export default class QoSPolicyDetail extends Base {
   }
 
   get listUrl() {
-    return this.getUrl('/network/qos-policy');
+    return this.getRoutePath('qosPolicy');
   }
 
   get actionConfigs() {

src/pages/network/containers/Router/Detail/index.jsx

@@ -33,7 +33,7 @@ export class RouterDetail extends Base {
   }
 
   get listUrl() {
-    return this.getUrl('/network/router');
+    return this.getRoutePath('router');
   }
 
   get actionConfigs() {

src/pages/network/containers/Router/Port/Detail/index.jsx

@@ -29,9 +29,11 @@ export class PortDetail extends Base {
 
   get listUrl() {
     const { routerId } = this.params;
-    return `/network/${this.getUrl(
+    return this.getRoutePath(
-      'router'
+      'routerDetail',
-    )}/detail/${routerId}?tab=interfaces`;
+      { id: routerId },
+      { tab: 'interfaces' }
+    );
   }
 
   get detailInfos() {

src/pages/network/containers/Router/Port/index.jsx

@@ -51,8 +51,12 @@ export default class Ports extends Base {
     {
       title: t('ID/Name'),
       dataIndex: 'name',
-      linkPrefix: `/network/${this.getUrl('router')}/${this.id}/port`,
       stringify: (name, record) => name || record.id,
+      routeName: this.getRouteName('routerPortDetail'),
+      routeParamsFunc: (data) => ({
+        routeId: this.id,
+        id: data.id,
+      }),
     },
     {
       title: t('IP Address'),

src/pages/network/containers/SecurityGroup/Detail/Rule/index.jsx

@@ -16,6 +16,7 @@ import { observer, inject } from 'mobx-react';
 import Base from 'containers/List';
 import globalSecurityGroupRuleStore from 'stores/neutron/security-rule';
 import { filterParams, getSelfColumns } from 'resources/security-group-rule';
+import { getPath } from 'utils/route-map';
 import actionConfigs from './actions';
 
 export class Rule extends Base {
@@ -32,7 +33,10 @@ export class Rule extends Base {
   }
 
   getDetailUrl(id) {
-    return `${this.getUrl('/network/security-group')}/detail/${id}`;
+    const key = this.isAdminPage
+      ? 'securityGroupDetailAdmin'
+      : 'securityGroupDetail';
+    return getPath({ key, params: { id } });
   }
 
   getColumns = () => getSelfColumns(this);

src/pages/network/containers/SecurityGroup/Detail/index.jsx

@@ -29,7 +29,7 @@ export class SecurityGroupDetail extends Base {
   }
 
   get listUrl() {
-    return this.getUrl('/network/security-group');
+    return this.getRoutePath('securityGroup');
   }
 
   get actionConfigs() {

src/pages/network/containers/SecurityGroup/index.jsx

@@ -60,15 +60,11 @@ export class SecurityGroups extends Base {
     return true;
   }
 
-  get detailLink() {
-    return `/network/${this.getUrl('security-group')}/detail`;
-  }
-
   getColumns = () => [
     {
       title: t('ID/Name'),
       dataIndex: 'name',
-      linkPrefix: this.detailLink,
+      routeName: this.getRouteName('securityGroupDetail'),
     },
     {
       title: t('Project ID/Name'),

src/pages/network/containers/VPN/EndpointGroup/actions/Create.js

@@ -165,7 +165,8 @@ export default class Create extends ModalAction {
           {
             title: t('Name'),
             dataIndex: 'name',
-            isName: true,
+            // todo: what?
+            isLink: true,
           },
           {
             title: t('CIDR'),

src/pages/network/containers/VPN/IPsecSiteConnection/Detail/index.jsx

@@ -34,7 +34,7 @@ export default class IPsecSiteConnection extends Base {
   }
 
   get listUrl() {
-    return `${this.getUrl('/network/vpn')}?tab=ipsec_site_connections`;
+    return this.getRoutePath('vpn', null, { tab: 'ipsec_site_connections' });
   }
 
   get actionConfigs() {

src/pages/network/containers/VPN/IPsecSiteConnection/index.jsx

@@ -58,8 +58,7 @@ export default class Index extends Base {
     {
       title: t('ID/Name'),
       dataIndex: 'name',
-      isName: true,
+      routeName: this.getRouteName('ipsecDetail'),
-      linkPrefix: `/network/${this.getUrl('ipsec-site-connection')}/detail`,
     },
     {
       title: t('Project ID/Name'),

src/pages/network/containers/VirtualAdapter/Detail/BaseDetail/index.jsx

@@ -43,15 +43,14 @@ export default class BaseDetail extends Base {
           const { itemInList: { device_id, device_owner, server_name } = {} } =
             record;
           if (device_id && device_owner === 'compute:nova') {
-            return (
+            const value = server_name
-              <Link
+              ? `${device_id} (${server_name})`
-                to={`${this.getUrl(
+              : device_id;
-                  '/compute/instance'
+            return this.getLinkRender(
-                )}/detail/${device_id}?tab=interface`}
+              'instanceDetail',
-              >
+              value,
-                {`${device_id}`}
+              { id: device_id },
-                {server_name && `(${server_name})`}
+              { tab: 'interface' }
-              </Link>
             );
           }
           return data || '-';

src/pages/network/containers/VirtualAdapter/Detail/SecurityGroups/index.jsx

@@ -25,6 +25,7 @@ import PrimaryActionButtons from 'components/Tables/Base/PrimaryActionButtons';
 import ItemActionButtons from 'components/Tables/Base/ItemActionButtons';
 import { getSelfColumns } from 'resources/security-group-rule';
 import { isAdminPage } from 'utils/index';
+import { getPath } from 'utils/route-map';
 import Detach from './actions/Detach';
 import styles from './index.less';
 
@@ -40,12 +41,11 @@ export class SecurityGroup extends React.Component {
     this.refreshSecurityGroup();
   }
 
-  getUrl(path, adminStr) {
-    return this.isAdminPage ? `${path}${adminStr || '-admin'}` : path;
-  }
-
   getDetailUrl(id) {
-    return `${this.getUrl('/network/security-group')}/detail/${id}`;
+    const key = this.isAdminPage
+      ? 'securityGroupDetailAdmin'
+      : 'securityGroupDetail';
+    return getPath({ key, params: { id } });
   }
 
   get portId() {

src/pages/network/containers/VirtualAdapter/Detail/index.jsx

@@ -32,7 +32,7 @@ export class VirtualAdapterDetail extends Base {
   }
 
   get listUrl() {
-    return this.getUrl('/network/virtual_adapter', '_admin');
+    return this.getRoutePath('virtualAdapter');
   }
 
   get actionConfigs() {

src/pages/network/containers/VirtualAdapter/index.jsx

@@ -13,7 +13,6 @@
 // limitations under the License.
 
 import React from 'react';
-import { Link } from 'react-router-dom';
 import { observer, inject } from 'mobx-react';
 import Base from 'containers/List';
 import { VirtualAdapterStore } from 'stores/neutron/virtual-adapter';
@@ -120,10 +119,7 @@ export class VirtualAdapter extends Base {
       {
         title: t('ID/Name'),
         dataIndex: 'name',
-        linkPrefix: `/network/${this.getUrl(
+        routeName: this.getRouteName('virtualAdapterDetail'),
-          'virtual_adapter',
-          '_admin'
-        )}/detail`,
       },
       {
         title: t('Project ID/Name'),
@@ -145,18 +141,22 @@ export class VirtualAdapter extends Base {
           `;
         },
         render: (server_name, item) => {
-          if (item.device_id && item.device_owner === 'compute:nova') {
+          const { device_id, device_owner } = item;
+          if (device_id && device_owner === 'compute:nova') {
+            const value = server_name
+              ? `${device_id} (${server_name})`
+              : device_id;
+            const link = this.getLinkRender(
+              'instanceDetail',
+              value,
+              { id: item.device_id },
+              { tab: 'interface' }
+            );
             return (
               <>
                 {item.device_owner}
                 <br />
-                <Link
+                {link}
-                  to={`${this.getUrl('/compute/instance')}/detail/${item.device_id
-                    }?tab=interface`}
-                >
-                  {`${item.device_id}`}
-                  {server_name && `(${server_name})`}
-                </Link>
               </>
             );
           }
@@ -174,8 +174,8 @@ export class VirtualAdapter extends Base {
       {
         title: t('Owned Network'),
         dataIndex: 'network_name',
-        isName: true,
+        isLink: true,
-        linkPrefix: `/network/${this.getUrl('networks')}/detail`,
+        routeName: this.getRouteName('networkDetail'),
         idKey: 'network_id',
         sorter: false,
       },

src/pages/storage/containers/Backup/Detail/BaseDetail.jsx

@@ -12,10 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React from 'react';
 import { inject, observer } from 'mobx-react';
 import Base from 'containers/BaseDetail';
-import { Link } from 'react-router-dom';
 
 @inject('rootStore')
 @observer
@@ -33,11 +31,8 @@ export default class BaseDetail extends Base {
         copyable: {
           text: this.detailData.volume_id,
         },
-        render: (value) => (
+        render: (value) =>
-          <Link to={`${this.getUrl('/storage/volume')}/detail/${value}`}>
+          this.getLinkRender('volumeDetail', value, { id: value }),
-            {value}
-          </Link>
-        ),
       },
       {
         label: t('Volume'),

src/pages/storage/containers/Backup/Detail/index.jsx

@@ -31,7 +31,7 @@ export default class Detail extends Base {
   }
 
   get listUrl() {
-    return this.getUrl('/storage/backup');
+    return this.getRoutePath('backup');
   }
 
   get actionConfigs() {

src/pages/storage/containers/Backup/index.jsx

@@ -71,7 +71,7 @@ export default class Backup extends Base {
       {
         title: t('ID/Name'),
         dataIndex: 'name',
-        linkPrefix: `/storage/${this.getUrl('backup')}/detail`,
+        routeName: this.getRouteName('backupDetail'),
         sortKey: 'id',
       },
       {
@@ -83,11 +83,9 @@ export default class Backup extends Base {
       {
         title: t('Volume ID/Name'),
         dataIndex: 'volume_name',
-        isName: true,
+        isLink: true,
-        linkFunc: (value, record) =>
+        routeQuery: { tab: 'backup' },
-          `/storage/${this.getUrl('volume')}/detail/${
+        routeName: this.getRouteName('volumeDetail'),
-            record.volume_id
-          }?tab=backup`,
         idKey: 'volume_id',
         sortKey: 'volume_id',
       },