support react-router-dom v17

[vrecan]

When using v17 of react-router-dom I get the following error:

apm Uncaught Error: "[ApmRoute2]" is not a <Route> component. 
All component children of <Routes> must be a <Route> or <React.Fragment>

Here is the code example, this works when I switch out the apmRoute for a normal Route

  return (
    <>
      {!isIdle && <Heartbeat setIsLoggedIn={setIsLoggedIn} />}
      <Router>
        <Routes>
          <ApmRoute path="/login" element={<Login />} />
          <ApmRoute path="/" element={<Desktop />}>
            <ApmRoute index element={<AgentDashboard />} />
            <ApmRoute
              path="/conversations/:conversationId"
              element={<CurrentConversation />}
            />
            <ApmRoute path="/conversations/new" element={<NewConversation />} />
          </ApmRoute>
        </Routes>
      </Router>
    </>
  );
};

Here are my imports:

import { useState } from 'react';
import { QueryClientProvider } from 'react-query';
import { ReactQueryDevtools } from 'react-query/devtools';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { ApmRoute } from '@elastic/apm-rum-react';

import { Login } from './components';
import { AgentDashboard } from './domains/AgentDashboard';
import { CurrentConversation } from './domains/CurrentConversation';
import { ModalProvider } from './domains/Modal';
import { NewConversation } from './domains/NewConversation';
import { Desktop } from './domains/Desktop';
import { queryClient, state, hooks } from './utils';

From what I can tell apmRoute isn't extending Route.

[devcorpio]

Hi @vrecan ,

Thanks for reaching out. At this moment the agent does not have out-of-the-box support for react-router-dom v6. It supports v4 and v5.

In this issue we offer possible tradeoffs that might be helpful for you.

We still don't have plans to start the development to add the v6 support.

Thanks, Alberto

[jbournonville]

Any updates on plan to make devs for react-router v6 support ?

[puunukk]

Any updates on plan for react-router-dom v6 support?

[drewpost]

Hello to everyone following this issue. Apologies for the slow replies. I can confirm that we intend to deliver this support with an update coming to our RUM-JS agent this summer.

[LeaTaka]

Hey @drewpost , Do you have an update on your 'RUM-JS agent release' delivery planning regarding v6 support?

[devcorpio]

Hi @LeaTaka,

yes, as Drew previously commented we intend to deliver this support with an update coming to our RUM-JS agent this summer. The team is already focused on this, we will update this ticket in the upcoming weeks once the development is finished.

Thanks again for your patience.

Alberto

[pkrauss-prot]

coming up to a month later since last response, would love to be able to use apm-agent-rum-js with the latest major version of react-router-dom

[paulb-elastic]

Thanks for your patience, we are actively working on this and hope to share an further update in the coming weeks

[devcorpio]

Hi everyone,

there is a new release for the @elastic/apm-rum-react, the version is 2.0.0.

Shortly we will update the react docs with more info, but you can see the preview here:

https://github.com/elastic/apm-agent-rum-js/pull/1411

Now, there will be a new component name ApmRoutes:

e.g.

      <BrowserRouter>
        <ApmRoutes>
          <Route path="/" element={<HomeComponent />} />
          <Route path="/about" element={<AboutComponent />} />
        </ApmRoutes>
      </BrowserRouter>

All routes within ApmRoutes will be instrumented.

Thanks again for your patience

Alberto