如何解决Remix中useFetcher路由错误及createBrowserRouter使用问题？

解决「useFetcher must be used within a data router」错误 #

Remix的useFetcher依赖内置的数据路由系统，不能直接在普通React路由中使用。默认Remix项目基于app/routes目录自动生成路由，无需手动用createBrowserRouter封装，你大概率是搞错了路由初始化方式。

如果是从头搭建项目，正确的root.tsx写法如下：

import { Outlet, Links, Scripts } from "@remix-run/react";

export default function App() {
  return (
    <html>
      <head>
        <Links />
      </head>
      <body>
        <Outlet />
        <Scripts />
      </body>
    </html>
  );
}

在app/routes下创建的页面组件中，可直接使用useFetcher，无需额外路由配置。

解决「ReferenceError: document is not defined」错误 #

该错误是因为在服务端渲染阶段访问了浏览器专属的document对象。Remix是同构框架，loader、action以及组件的服务端渲染部分不能直接调用浏览器API。

若必须使用document，需确保代码只在客户端执行：

import { useEffect } from "react";

function YourComponent() {
  useEffect(() => {
    // useEffect仅在客户端执行，可安全访问document
    document.title = "自定义标题";
  }, []);

  return <div>...</div>;
}

解决Loader类型错误 #

Remix的loader有明确的类型约束，需从@remix-run/node导入LoaderFunctionArgs来规范参数类型：

import type { LoaderFunctionArgs } from "@remix-run/node";
import { json } from "@remix-run/node";

export async function loader({ request, params }: LoaderFunctionArgs) {
  // request和params将获得正确的类型提示
  const data = await fetchData(params.id);
  return json(data);
}

createBrowserRouter的正确使用场景 #

仅当你需要自定义路由规则（不依赖文件系统路由）时，才需要使用createBrowserRouter，但必须配合Remix的入口文件区分客户端和服务端逻辑：

客户端入口（app/entry.client.tsx） #

import { RemixBrowser } from "@remix-run/react";
import { startTransition, StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";

startTransition(() => {
  hydrateRoot(
    document.getElementById("root")!,
    <StrictMode>
      <RemixBrowser />
    </StrictMode>
  );
});

服务端入口（app/entry.server.tsx） #

保持Remix默认的服务端渲染逻辑即可，不要在其中直接操作浏览器API。

新手建议优先使用Remix的文件系统路由，减少手动配置的复杂度，避免不必要的错误。

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