feat(react): Support useRoutes hook of React Router 6.

[onurtemizkan]

Resolves: #5338

This PR introduces wrapUseRoutes function, which can be used to patch useRoutes hook of React Router 6.

Example usage:

import {
    createRoutesFromChildren,
    matchRoutes,
    useLocation,
    useNavigationType,
    useRoutes,
} from "react-router-dom";
import { wrapUseRoutes } from "@sentry/react";
import { useEffect } from "react";

Sentry.init({
    dsn: "__DSN__",
    integrations: [
        new BrowserTracing({
            routingInstrumentation: Sentry.reactRouterV6Instrumentation(
                useEffect,
                useLocation,
                useNavigationType,
                createRoutesFromChildren,
                matchRoutes,
            ),
        }),
    ],
    tracesSampleRate: 1.0,
});

const useSentryRoutes = wrapUseRoutes(useRoutes);

function App() {
    return useSentryRoutes([
        // ...
    ]);
}

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>,
    document.getElementById("root"),
);

Note: createRoutesFromChildren is not used by wrapUseRoutes. But, not to break the API (parameter order) of reactRouterV6Instrumentation, I had to keep it as the 4th argument. wrapUseRoutes doesn't do a null check for it though, so it's safe to pass anything with the current implementation. Any suggestions?

[AbhiPrasad]

Will this cause any issues with https://reactjs.org/docs/hooks-rules.html?

[onurtemizkan]

Will this cause any issues with https://reactjs.org/docs/hooks-rules.html?

It seems meeting the requirements:

Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function, before any early returns. By following this rule, you ensure that Hooks are called in the same order each time a component renders. That’s what allows React to correctly preserve the state of Hooks between multiple useState and useEffect calls.

1 - We're calling all hooks from the top level of a functional React component that we return, including the original useRoutes hook.

2 - There are no early returns inside the hook. The one early return happens outside of React component context, and returns the original useRoutes hook if something's wrong.

Don’t call Hooks from regular JavaScript functions. Instead, you can: Call Hooks from React function components.

This also passes

Would be better if I renamed the wrapped hook as useSentryRoutes in the example, to highlight it should be treated as a hook. But we don't have much control over it at the end.

The open issue (#5309) probably will apply to this as well, though. Maybe I should focus on that next. WDYT?

[AbhiPrasad]

Would be better if I renamed the wrapped hook as useSentryRoutes in the example, to highlight it should be treated as a hook. But we don't have much control over it at the end.

We should name it useSentryRoutes in the docs, and make sure the emphasize that it should be declared outside of a component.

I think it's reasonable to look at #5309 after this as well!