react day6: 路由的action

20_React.js_VIP22/React路由.md

@@ -348,8 +348,6 @@ export default function Protected() {
 
 ```
 
-
-
 ## 8. 其他
 
 ### 8.1 路由懒加载

20_React.js_VIP22/day-6/code/react-router-demo/src/App.css

@@ -15,5 +15,5 @@
 .App-link {
   color: #61dafb;
 
-  width: 50px;
+  width: 100px;
 }

20_React.js_VIP22/day-6/code/react-router-demo/src/App.js

@@ -8,6 +8,8 @@ import Home from './pages/Home';
 import UserProfile from './pages/UserProfle';
 import UserPost from './pages/UserPost';
 
+import Users from '../../react-router-lazy/src/pages/Users';
+
 const About = lazy(async () => {
   await new Promise((resolve) => {
     setTimeout(() => {

20_React.js_VIP22/day-6/code/react-router-demo/src/App.test.js

@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

20_React.js_VIP22/day-6/code/react-router-demo/src/setupTests.js

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';

20_React.js_VIP22/day-6/code/react-router-lazy/src/pages/Users.jsx

@@ -0,0 +1,28 @@
+import { Form } from 'react-router-dom';
+
+export default function Users() {
+  return (
+    <div>
+      <div>
+        <Form method="post" action="/users" encType="text/plain">
+          <input type="text" name="name" placeholder="请输入姓名..." />
+          <input type="number" name="age" placeholder="请求输入年龄.." />
+          <button type="submit" name="command" value={'add'}>
+            Create
+          </button>
+        </Form>
+      </div>
+      <table>
+        <thead>
+          <tr>
+            <th>姓名</th>
+            <th>年龄</th>
+          </tr>
+        </thead>
+      </table>
+    </div>
+  );
+}
+
+// 定义loader
+// 定义actions

20_React.js_VIP22/day-6/code/react-router-lazy/src/router/index.js

@@ -5,6 +5,7 @@ import { lazy, Suspense } from 'react';
 
 const About = lazy(() => import('../pages/About'));
 const Protected = lazy(() => import('../pages/Protected'));
+const Users = lazy(() => import('../pages/Users'));
 
 const router = createBrowserRouter([
   { path: '/', Component: Home },
@@ -28,6 +29,26 @@ const router = createBrowserRouter([
     path: '/login',
     element: <Login />,
   },
+  {
+    path: '/users',
+    element: (
+      <Suspense fallback={<h3>加载中...</h3>}>
+        <Users />
+      </Suspense>
+    ),
+    action: async ({ request }) => {
+      // console.log(request);
+      // let fd = await request.formData();
+      // console.log(fd.get('name'));
+      // console.log(fd.get('age'));
+
+      let data = await request.json();
+      // let data = await request.formData();
+      console.log(data.get('command'));
+
+      return null;
+    },
+  },
 ]);
 
 export default router;

20_React.js_VIP22/day-6/code/react-router-lazy/src/setupTests.js

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';