admin管理员组

文章数量:1023195

I'm using Remix with a modern npx create-remix@latest (cloudflare) template. It uses React router under the hood (Remix does), but I don't explicitly use React router anywhere in my code.

Now I get this warning:

⚠️ 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 .

Clicking on the link gives me suggestions on how to edit the component to fix this, but I don't have such a component in my app.

These are my de(relevant) pendencies:

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

What do I do to make these warning logs go away / to fix this?

I'm using Remix with a modern npx create-remix@latest (cloudflare) template. It uses React router under the hood (Remix does), but I don't explicitly use React router anywhere in my code.

Now I get this warning:

⚠️ 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/v6/upgrading/future#v7_skipactionerrorrevalidation.

Clicking on the link gives me suggestions on how to edit the component to fix this, but I don't have such a component in my app.

These are my de(relevant) pendencies:

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

What do I do to make these warning logs go away / to fix this?

• react-router
• vite
• remix.run

Share Improve this question Follow edited Dec 28, 2024 at 13:54 Penny Liu 17.6k55 gold badges8686 silver badges108108 bronze badges asked Nov 18, 2024 at 20:35 SventiesSventies 2,78644 gold badges3737 silver badges5555 bronze badges 2

• 1 These are just warnings about future features so in all likelihood you can probably ignore them. Have you checked the Remix.run docs on configurability? – Drew Reese Commented Nov 18, 2024 at 20:43
• Yes this was my thinking too. I kind of live and die with console messages haha, but I understand that a little wait will probably do the trick. – Sventies Commented Nov 19, 2024 at 7:54

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 4

FYI: I am using react vite and install latesh react-router-dom

npm install react-router-dom@latest

To remove the warnings and make the app compatible with React Router v7, I enabled the recommended future flags explicitly in both the createBrowserRouter and RouterProvider.

import { createBrowserRouter, RouterProvider, Navigate } from "react-router-dom";

import Home from "./pages/Home";
import Login from "./pages/Login";
import PageNotFound from "./pages/PageNotFound";

// Configure the router with future flags enabled
const router = createBrowserRouter(
  [
    { path: "/", element: <Navigate to="/login" /> }, // Redirect to "/login"
    { path: "/login", element: <Login /> },
    { path: "/home", element: <Home /> },
    { path: "*", element: <PageNotFound /> }, // Fallback for unknown routes
  ],
  {
    future: {
      v7_relativeSplatPath: true, // Enables relative paths in nested routes
      v7_fetcherPersist: true,   // Retains fetcher state during navigation
      v7_normalizeFormMethod: true, // Normalizes form methods (e.g., POST or GET)
      v7_partialHydration: true, // Supports partial hydration for server-side rendering
      v7_skipActionErrorRevalidation: true, // Prevents revalidation when action errors occur
    },
  }
);

function App() {
  return (
    <RouterProvider
      future={{ v7_startTransition: true }} // Enables React's startTransition API
      router={router}
    />
  );
}

export default App;

It seems that React-Router-DOM v6.28.0 added some warnings:

v6.28.0

---

Date: 2024-11-06

What's Changed

• In preparation for v7 we've added deprecation warnings for any future flags that you have not yet opted into. Please use the flags to better prepare for eventually upgrading to v7.

These are just "warnings" about future features so in all likelihood you can probably completely ignore them. This is due to the way that Remix.run and React-Router share some common core.

It appears you can pass the future flags via your vite config.

For complete details see:

• Remix.run Future Flags
• Remix Vite Plugin Config

As per the warning you can apparently opt-in to the router's v7_skipActionErrorRevalidation feature early by enabling it in your config.

Example:

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
      },
      ....,
    }),
  ],
});

<BrowserRouter
  future={{
    v7_startTransition: true,
    v7_relativeSplatPath: true,
  }}>

I'm using Remix with a modern npx create-remix@latest (cloudflare) template. It uses React router under the hood (Remix does), but I don't explicitly use React router anywhere in my code.

Now I get this warning:

⚠️ 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 .

Clicking on the link gives me suggestions on how to edit the component to fix this, but I don't have such a component in my app.

These are my de(relevant) pendencies:

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

What do I do to make these warning logs go away / to fix this?

I'm using Remix with a modern npx create-remix@latest (cloudflare) template. It uses React router under the hood (Remix does), but I don't explicitly use React router anywhere in my code.

Now I get this warning:

⚠️ 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/v6/upgrading/future#v7_skipactionerrorrevalidation.

Clicking on the link gives me suggestions on how to edit the component to fix this, but I don't have such a component in my app.

These are my de(relevant) pendencies:

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

What do I do to make these warning logs go away / to fix this?

• react-router
• vite
• remix.run

Share Improve this question Follow edited Dec 28, 2024 at 13:54 Penny Liu 17.6k55 gold badges8686 silver badges108108 bronze badges asked Nov 18, 2024 at 20:35 SventiesSventies 2,78644 gold badges3737 silver badges5555 bronze badges 2

• 1 These are just warnings about future features so in all likelihood you can probably ignore them. Have you checked the Remix.run docs on configurability? – Drew Reese Commented Nov 18, 2024 at 20:43
• Yes this was my thinking too. I kind of live and die with console messages haha, but I understand that a little wait will probably do the trick. – Sventies Commented Nov 19, 2024 at 7:54

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 4

FYI: I am using react vite and install latesh react-router-dom

npm install react-router-dom@latest

To remove the warnings and make the app compatible with React Router v7, I enabled the recommended future flags explicitly in both the createBrowserRouter and RouterProvider.

import { createBrowserRouter, RouterProvider, Navigate } from "react-router-dom";

import Home from "./pages/Home";
import Login from "./pages/Login";
import PageNotFound from "./pages/PageNotFound";

// Configure the router with future flags enabled
const router = createBrowserRouter(
  [
    { path: "/", element: <Navigate to="/login" /> }, // Redirect to "/login"
    { path: "/login", element: <Login /> },
    { path: "/home", element: <Home /> },
    { path: "*", element: <PageNotFound /> }, // Fallback for unknown routes
  ],
  {
    future: {
      v7_relativeSplatPath: true, // Enables relative paths in nested routes
      v7_fetcherPersist: true,   // Retains fetcher state during navigation
      v7_normalizeFormMethod: true, // Normalizes form methods (e.g., POST or GET)
      v7_partialHydration: true, // Supports partial hydration for server-side rendering
      v7_skipActionErrorRevalidation: true, // Prevents revalidation when action errors occur
    },
  }
);

function App() {
  return (
    <RouterProvider
      future={{ v7_startTransition: true }} // Enables React's startTransition API
      router={router}
    />
  );
}

export default App;

It seems that React-Router-DOM v6.28.0 added some warnings:

v6.28.0

---

Date: 2024-11-06

What's Changed

• In preparation for v7 we've added deprecation warnings for any future flags that you have not yet opted into. Please use the flags to better prepare for eventually upgrading to v7.

These are just "warnings" about future features so in all likelihood you can probably completely ignore them. This is due to the way that Remix.run and React-Router share some common core.

It appears you can pass the future flags via your vite config.

For complete details see:

• Remix.run Future Flags
• Remix Vite Plugin Config

As per the warning you can apparently opt-in to the router's v7_skipActionErrorRevalidation feature early by enabling it in your config.

Example:

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
      },
      ....,
    }),
  ],
});

<BrowserRouter
  future={{
    v7_startTransition: true,
    v7_relativeSplatPath: true,
  }}>

本文标签： React Router Future Flag Warning in Remix Vite appStack Overflow