主页 / coding / 问题 / 79201371
Accepted
Sventies
Asked: 2024-11-19 04:35:47 +0800 CST

Remix Vite 应用中 React Router Future Flag 警告

  • 772

我正在使用 Remix 和现代npx create-remix@latest(cloudflare) 模板。它在底层使用 React 路由器 (Remix 也使用)，但我在代码中没有明确使用 React 路由器。

现在我收到此警告：

⚠️ React Router Future Flag Warning: The revalidation behavior after 4xx/5xx `action` responses is changing in v7. You can use the `v7_skipActionErrorRevalidation` future flag to opt-in early. For more information, see [https://reactrouter.com/v6/upgrading/future#v7_skipactionerrorrevalidation][1].

单击链接会给我提供有关如何编辑组件以解决此问题的建议，但我的应用程序中没有这样的组件。

以下是我的（相关）未决事项：

"@remix-run/cloudflare": "^2.11.1",
"@remix-run/cloudflare-pages": "^2.11.1",
"@remix-run/react": "^2.11.1",
"remix-utils": "^7.6.0",

我该怎么做才能让这些警告日志消失/解决这个问题？

vite

2 个回答

  1. 最近我遇到了同样的错误，解决方案future={{ v7_startTransition: true }}如下RouterProvider 

    import { RouterProvider } from "react-router-dom";

import "./App.css";
import router from "./routes/AppRoutes";

function App() {

  return (
    <>
      <RouterProvider router={router} future={{ v7_startTransition: true }} />
    </>
  );
}

export default App;

    并添加future到你的路由器文件中

    import { createBrowserRouter } from "react-router-dom";
const router = createBrowserRouter([//routes], {
  future: {
    v7_relativeSplatPath: true,
    v7_fetcherPersist: true,
    v7_normalizeFormMethod: true,
    v7_partialHydration: true,
    v7_skipActionErrorRevalidation: true,
  },
});
export default router;
    • 2
  2. Best Answer

    这些只是关于未来功能的“警告”，因此您很可能完全忽略它们。

    看来您可以通过 vite 配置传递未来的标志。

    完整详情请参阅：

    v7_skipActionErrorRevalidation根据警告，您可以通过在配置中启用该路由器功能来提前选择加入该路由器功能。

    例子：

    import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    remix({
      ....,
      future: {
        /* any enabled future flags */
        v7_skipActionErrorRevalidation: true, // <-- early opt-in
      },
      ....,
    }),
  ],
});
    • 1

相关问题