优化客户端请求时候操作的页面不更新

app/routes/login.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { useActionData } from "@remix-run/react";
+import { useActionData, Form } from "@remix-run/react";
 import { type MetaFunction, type ActionFunctionArgs, redirect, type LoaderFunctionArgs } from "@remix-run/node";
 import styles from "~/styles/pages/login.css?url";
 import { getUserSession, getSession, type UserRole, sessionStorage } from "~/root";
@@ -22,7 +22,7 @@ export async function action({ request }: ActionFunctionArgs) {
   const password = formData.get("password") as string;
   const userRole = formData.get("userRole") as UserRole || 'common';
 
-  console.log("userRole-----", userRole);
+  // console.log("userRole-----", userRole);
   
   // 简单的登录验证，实际应用中应该进行真正的身份验证
   if (!username || !password) {
@@ -39,7 +39,7 @@ export async function action({ request }: ActionFunctionArgs) {
   const session = await getSession(request);
   // 查看session中存储的redirectTo值
   const redirectTo = session.get("redirectTo") || "/";
-  console.log("登录后重定向到:", redirectTo);
+  // console.log("登录后重定向到:", redirectTo);
   
   // 创建会话cookie
   const newSession = await sessionStorage.getSession();
@@ -47,7 +47,7 @@ export async function action({ request }: ActionFunctionArgs) {
   newSession.set("userRole", userRole);
   const cookie = await sessionStorage.commitSession(newSession);
   
-  console.log("设置cookie:", !!cookie);
+  // console.log("设置cookie:", !!cookie);
   
   // 使用新方法进行重定向
   return redirect(redirectTo, {
@@ -85,8 +85,7 @@ export default function Login() {
         
         <div className="login-form-container">
           <h2 className="login-subtitle">用户登录</h2>
-          <form 
-            action="/login" 
+          <Form 
             method="post" 
             className="login-form"
           >
@@ -144,7 +143,7 @@ export default function Login() {
             >
               登录
             </button>
-          </form>
+          </Form>
         </div>
         
         <div className="login-footer">