dva

.umirc.ts

@@ -4,5 +4,11 @@ export default defineConfig({
   nodeModulesTransform: {
     type: 'none',
   },
-  routes: [{ path: '/', component: '@/pages/index' }],
+  base: '/',
+  history: { type: 'hash' },
+  routes: [
+    { path: '/', component: '@/pages/index' },
+    { path: '/login', component: '@/pages/login' },
+    { path: '/products', component: '@/pages/products' },
+  ],
 });

src/components/ProductList.tsx

@@ -0,0 +1,23 @@
+import { Table, Popconfirm, Button } from 'antd';
+
+const ProductList = ({ onDelete, products }) => {
+  const columns = [
+    {
+      title: 'Name',
+      dataIndex: 'name',
+    },
+    {
+      title: 'Actions',
+      render: (text, record) => {
+        return (
+          <Popconfirm title="Delete?" onConfirm={() => onDelete(record.id)}>
+            <Button>Delete</Button>
+          </Popconfirm>
+        );
+      },
+    },
+  ];
+  return <Table dataSource={products} columns={columns} />;
+};
+
+export default ProductList;

src/models/products.ts

@@ -0,0 +1,12 @@
+export default {
+  namespace: 'products',
+  state: [
+    { name: 'dva', id: 'dva', key: 0 },
+    { name: 'antd', id: 'antd', key: 1 },
+  ],
+  reducers: {
+    delete(state, { payload: id }) {
+      return state.filter(item => item.id !== id);
+    },
+  },
+};

src/pages/index.tsx

@@ -1,10 +1,15 @@
 import React from 'react';
 import styles from './index.less';
+import { Button } from 'antd';
 
-export default () => {
+export default props => {
+  function goto() {
+    console.log(props.history.push('/products'));
+  }
   return (
     <div>
       <h1 className={styles.title}>Page index</h1>
+      <Button onClick={e => goto()}>Button</Button>
     </div>
   );
 };

src/pages/login.less

@@ -0,0 +1,3 @@
+.title {
+  background: rgb(183, 121, 242);
+}

src/pages/login.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import styles from './login.less';
+
+export default () => {
+  return (
+    <div>
+      <h1 className={styles.title}>Page login</h1>
+    </div>
+  );
+};

src/pages/products.less

@@ -0,0 +1,3 @@
+.title {
+  background: rgb(121, 242, 132);
+}

src/pages/products.tsx

@@ -0,0 +1,26 @@
+import { connect, history } from 'umi';
+import { Button } from 'antd';
+import ProductList from '@/components/ProductList';
+
+const Products = ({ dispatch, products }) => {
+  function handleDelete(id) {
+    dispatch({
+      type: 'products/delete',
+      payload: id,
+    });
+  }
+  function goto() {
+    console.log(history.push('/'));
+  }
+  return (
+    <div>
+      <h2>List of Products</h2>
+      <Button onClick={e => goto()}>Button</Button>
+      <ProductList onDelete={handleDelete} products={products} />
+    </div>
+  );
+};
+
+export default connect(({ products }) => ({
+  products,
+}))(Products);