Cannot use ApmRoutes with react-router v7

[immnk]

When using ApmRoutes with react-router package v7, I get this error

package.json "react-router": "^7.2.0" "@elastic/apm-rum": "^5.16.0", "@elastic/apm-rum-react": "^2.0.2",

main.tsx

import { ApmRoutes } from '@elastic/apm-rum-react';

export function App() { return ( <ApmRoutes> </ApmRoutes> ); }

[rlueder]

@immnk hard to tell from the example you pasted but make sure you have the correct structure, you also need BrowserRouter as a wrapper, which seems to be missing based on your screenshot.

I was able to use the Elastic APM React agent w/ React Router 7.2.2, basic example below:

import { ApmRoutes } from "@elastic/apm-rum-react";
import { BrowserRouter, Route } from "react-router";

export const App = () => {
  return (
      <>
        <BrowserRouter>
          <ApmRoutes> // <-- replaces the "Routes" component from react-router
            <Route
              index
              path="/"
              element={<Home />}
            />
            <Route
              path="/settings"
              element={<Settings />}
            />
          </ApmRoutes>
        </BrowserRouter>
      </>
  );
};

[david-luna]

@immnk did the comment above help you to resolve the issue?