fix: umi4使用browserRouter不再支持state

config/routes.ts

@@ -46,7 +46,7 @@
             component: './Project/Management/List'
           },
           {
-            path: '/project/management/detail',
+            path: '/project/management/:id',
             name: 'detail',
             hideInMenu: true,
             component: './Project/Management/Detail'

src/pages/Project/Management/Detail/index.tsx

@@ -1,7 +1,7 @@
 import { getProject } from '@/services/api/project'
 import { PageContainer } from '@ant-design/pro-layout'
 import React, { useEffect, useState } from 'react'
-import { useRequest } from '@umijs/max'
+import { useLocation, useParams, useRequest } from '@umijs/max'
 import ProjectInfo from './components/ProjectInfo'
 import type { RouteComponentProps } from 'umi/node_modules/@types/react-router'
 import RolePerm from './components/RolePerm'
@@ -23,8 +23,9 @@ type ProjectDetailStateProps = {
   projectInfo: Nullable<API.ProjectListItem>
   selectKey: TabEnum
 }
-const ProjectDetail: React.FC<RouteComponentProps> = ({ location }) => {
-  const { dataID } = location.state
+const ProjectDetail: React.FC<RouteComponentProps> = () => {
+  const { id: ID } = useParams()
+
   const [state, setState] = useState<ProjectDetailStateProps>({
     projectInfo: null,
     selectKey: TabEnum.INFO
@@ -34,10 +35,10 @@ const ProjectDetail: React.FC<RouteComponentProps> = ({ location }) => {
     onSuccess: (result: API.ProjectDetail) => setState({ ...state, projectInfo: result })
   })
   useEffect(() => {
-    if (dataID) {
-      tryGetProjectInfo({ ID: dataID })
+    if (ID) {
+      tryGetProjectInfo({ ID })
     }
-  }, [dataID])
+  }, [ID])
 
   const renderChildren = () => {
     switch (state.selectKey) {

src/pages/Project/Management/List/index.tsx

@@ -1,9 +1,9 @@
 import { delProject, getProjectList } from '@/services/api/project'
 import ProTable from '@ant-design/pro-table'
-import { Button, Tag, Modal } from 'antd'
+import { Tag, Modal } from 'antd'
 import consts from '@/utils/consts'
 import { useRef, useState, useEffect, useMemo } from 'react'
-import { connect, history, useRequest } from '@umijs/max'
+import { connect, history, Link, useRequest } from '@umijs/max'
 import { DeleteOutlined } from '@ant-design/icons'
 import ProjectModal, { ModalType } from './components/ProjectModal'
 import dayjs from 'dayjs'
@@ -77,13 +77,11 @@ const List: React.FC<ListProps> = ({ schema, dispatch, pTypeList }) => {
       width: 286,
       onHeaderCell: () => ({ style: { textAlign: 'center' } }),
       render: (text, record) => (
-        <span
-          className="text-primary cursor-pointer hover:text-hex-967bbd"
-          onClick={() => {
-            goToDetail({ dataID: record.ID })
-          }}>
+        <Link
+          to={`/project/management/${record.ID}`}
+          className="text-primary cursor-pointer hover:text-hex-967bbd">
           {text}
-        </span>
+        </Link>
       )
     },
     {