refinedev/refine · warning

Unsupported properties are found in `routerProvider` prop. Y

Error message

Unsupported properties are found in `routerProvider` prop. You provided `${otherProps.join(", ")}`. Supported properties are `${bindings.join(", ")}`. You may wanted to use `legacyRouterProvider` prop instead.

What it means

Warned by `checkRouterPropMisuse` in @refinedev/core when the `routerProvider` prop on `<Refine>` contains keys that are not in the current supported binding list. After v4/'legacy' split, `routerProvider` only accepts a narrow set of bindings; full legacy router objects must go to the `legacyRouterProvider` prop. The warning lists the offending keys and the supported ones.

Source

Thrown at packages/core/src/definitions/helpers/check-router-prop-misuse/index.ts:16

import type { RouterProvider } from "../../../contexts/router/types";

export const checkRouterPropMisuse = (value: RouterProvider) => {
  // check if `routerProvider` prop is passed with legacy properties.
  // If yes, console.warn the user to use `legacyRuterProvider` prop instead.
  const bindings = ["go", "parse", "back", "Link"];

  // check if `value` contains properties other than `bindings`
  const otherProps = Object.keys(value).filter(
    (key) => !bindings.includes(key),
  );

  const hasOtherProps = otherProps.length > 0;

  if (hasOtherProps) {
    console.warn(
      `Unsupported properties are found in \`routerProvider\` prop. You provided \`${otherProps.join(
        ", ",
      )}\`. Supported properties are \`${bindings.join(
        ", ",
      )}\`. You may wanted to use \`legacyRouterProvider\` prop instead.`,
    );

    return true;
  }

  return false;
};

View on GitHub (pinned to 779d52a20e)

Solutions

1. Move the legacy provider object to the `legacyRouterProvider` prop: `<Refine legacyRouterProvider={...}>`
2. If you intended the new API, remove the unsupported keys and keep only the documented binding properties in `routerProvider`
3. Use an official provider package (e.g. @refinedev/react-router-v6) and pass it exactly as its docs show

Example fix

// before
<Refine routerProvider={legacyRouterProvider} />
// after
<Refine legacyRouterProvider={legacyRouterProvider} />

const allowed = ['goBack','parse','Link','useLocation','useNavigate','useParams','useSearchParams','prompt','Outlet','useHref'];
const bad = Object.keys(routerProvider).filter((k) => !allowed.includes(k));
if (bad.length) console.warn('legacy keys on routerProvider:', bad);

const isLegacyProvider = (p: Record<string, unknown>) =>
  Object.keys(p).some((k) => ['BrowserRouter','HashRouter','MemoryRouter','NavLink'].includes(k));

When it happens

Trigger: Passing a legacy router provider object (with keys like `BrowserRouter`, `HashRouter`, `Link`, `useLocation`, etc.) to the new `routerProvider` prop, or otherwise including any key not present in the `bindings` allow-list of checkRouterPropMisuse.

Common situations: Upgrading refine v3/v4 projects to v4.x+ where the provider API was split; hand-written router providers not trimmed to the binding interface; copy-pasting old examples into a new project.

Related errors

• Invalid action type
• useGetLocale cannot be called without i18n provider being de
• If you use `useDataGrid` hook, you need to use `DataGrid` el
• @packages/hasura: multiple filters present. Group multiple p
• No resource is found. navigation to ${fallbackTo}.

AI-assisted analysis of refinedev/refine@779d52a20e (2026-08-27). Data as JSON: /api/errors/f9ec726350a8d4e9. Report an issue: GitHub.