React Router v7中fetcher提交数据触发整页刷新问题咨询

我在使用React Router v7开发时遇到一个问题：通过fetcher提交数据时会触发整页刷新。按照我的理解，fetcher应该只完成数据提交、重新加载路由数据并重新渲染组件，但实际流程是提交数据、获取新数据后触发了整页刷新，看起来fetcher最终并未阻止浏览器的默认表单提交行为。

相关代码 #

路由组件（对应/test-fetcher路由） #

// 对应路由 "test-fetcher" 的组件
import { initialData, saveData } from 'data/data-server'; // 仅用于在服务端读写JSON文件
import type { Route } from './+types/test-fetcher';
import SideBar from '~/components/SideBar';
import BasicDisplay from '~/components/BasicDisplay';

export async function loader({ params }: Route.LoaderArgs) {
    return initialData();
}

export async function action({ params, request }: Route.LoaderArgs) {
    const data = await request.formData();

    await saveData(data.get('label'));

    return Response.json({ ok: true });
}

export default function TestFetcher({
    loaderData,
}: Route.ComponentProps) {
    const { elts } = loaderData;

    return (
        <div>
            <BasicDisplay elts={elts} />
            <SideBar />
        </div>
    );
}

SideBar组件（使用useFetcher钩子） #

import { useState } from 'react';
import { useFetcher } from 'react-router';

export default function SideBar() {
    const [inputValue, setInputValue] = useState('post me please');
    const fetcher = useFetcher();
    const onInputChange = (evt) => {
        setInputValue(evt.currentTarget.value);
    };

    return (
        <aside className="w-2/5">
            <fetcher.Form
                method="post"
                action="/test-fetcher"
                className="my-10 px-4"
            >
                <input
                    type="text"
                    value={inputValue}
                    onChange={onInputChange}
                    name="label"
                />
                <button type="submit">Submit</button>
            </fetcher.Form>
        </aside>
    );
}

BasicDisplay组件 #

const BasicDisplay = ({ elts }) => {
    return (
        <ul>
            {elts.map((e) => (
                <li key={e.id}>{e.label}</li>
            ))}
        </ul>
    );
};

export default BasicDisplay;

package.json 依赖配置 #

{
    [...]
    "private": true,
    "type": "module",
    "scripts": {
        "build": "react-router build",
        "dev": "react-router dev",
        "start": "react-router-serve ./build/server/index.js",
        "typecheck": "react-router typegen && tsc"
    },
    "dependencies": {
        "@dagrejs/dagre": "^1.1.4",
        "@hookform/resolvers": "^4.1.2",
        "@radix-ui/react-label": "^2.1.2",
        "@radix-ui/react-slot": "^1.1.2",
        "@react-router/node": "^7.1.5",
        "@react-router/serve": "^7.1.5",
        "@xyflow/react": "^12.4.2",
        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
        "isbot": "^5.1.17",
        "lucide-react": "^0.474.0",
        "openai": "^4.85.2",
        "react": "^19.0.0",
        "react-dom": "^19.0.0",
        "react-hook-form": "^7.54.2",
        "react-router": "^7.1.5",
        "tailwind-merge": "^3.0.1",
        "tailwindcss-animate": "^1.0.7",
        "zod": "^3.24.2",
        "zustand": "^5.0.3"
    },
    "devDependencies": {
        "@react-router/dev": "^7.1.5",
        "@tailwindcss/vite": "^4.0.0",
        "@types/node": "^20",
        "@types/react": "^19.0.1",
        "@types/react-dom": "^19.0.1",
        "autoprefixer": "^10.4.20",
        "react-router-devtools": "^1.0.0",
        "tailwindcss": "^4.0.4",
        "typescript": "^5.7.2",
        "vite": "^5.4.11",
        "vite-tsconfig-paths": "^5.1.4"
    }
}

内容的提问来源于stack exchange，提问作者JuCachalot