1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

import React from 'react';

import { Form } from 'react-router-dom';

export async function action({ request }: { request: Request }) {

  console.log('? Action triggered!');

  const formData = await request.formData();

  const email = formData.get('email') as string;

  const password = formData.get('password') as string;

  // 示例：模拟登录验证（实际应调用 API）

  if (email && password) {

    return { success: true, message: 'Login successful' };

  }

  throw new Response('Invalid credentials', { status: 400 });

}

const AdminLogin = () => {

  return (

    <div>

      <Form method="post"> {/* ← 关键：必须是非-get 方法 */}

        <input

          type="text"

          name="email"

          placeholder="Enter email or User ID"

          autoComplete="username"

        />

        <input

          type="password"

          name="password"

          placeholder="Enter Password"

          autoComplete="current-password"

        />

        <button type="submit">Log In</button> {/* ← 显式声明 type */}

      </Form>

    </div>

  );

};

export default AdminLogin;

<Route path="adminlogin" action={action} element={<AdminLogin />} />