Feature: Support for React Router v6.4 Data APIs

[h-jennings]

React Router v6.4 introduced new APIs for configuring your applications route tree.

• createBrowserRouter
• createMemoryRouter
• createHashRouter
• createStaticRouter

The @elastic/apm-rum-react package supports React Router v6 where you define your routes in JSX via a BrowserRouter and a subsequent route tree with Routes. Thus leading to the (excellent) ApmRoute and ApmRoutes APIs in order to "register" your route with the APM service.

However, if an application wants to use the new data router syntax, these APIs won't work as there is no longer a Route or Routes element if you're using the createBrowserRouter API.

Here's my best guess on what the best options are if you want to use the new data router APIs:

1. createBrowserRouter paired with createRoutesFromElements and ApmRoute like so:

const router = createBrowserRouter(
  createRoutesFromElements(
    <ApmRoute path="/" element={<Root />}>
      <ApmRoute path="dashboard" element={<Dashboard />} />
      <ApmRoute path="about" element={<About />} />
    </ApmRoute>
  )
);

2. createBrowerRouter paired with the withTransaction HOC

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />, // see below
    children: [
      {
        path: "dashboard",
        element: <Dashboard />,
      },
      {
        path: "about",
        element: <About />,
      },
    ],
  },
]);

// Root.tsx
function RootPage() {
  return <h1>Root!</h1>;
}

export const Root = withTransaction('/', 'route-change')(Root);

In my application, I've opted for option 2 since we prefer to use the object syntax over the JSX syntax for defining our routes.

Given what I've laid out:

1. Is this the correct approach or do you recommend something different?
2. Could their be an opportunity to better support the data router without having to register each individual route with either the ApmRoute syntax or the withTransaction syntax.

In the meantime I've created a light wrapper of withTransaction like so:

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

export function withRouteTransaction(name: string) {
  return <T>(Component: React.ComponentType<T>) =>
    withTransaction(name, 'route-change')(Component);
}

Thanks for the great library!

[jukkahyv]

I think the ApmRoute type isn't available anymore anyway? Seems to have been removed. So the option 2 is the only way, without reimplementing ApmRoute. I'm doing the migration to data APIs also.