update tabs + note on v7 framework mode

Author: chargome

docs/platforms/javascript/guides/react/features/react-router/v6-7.mdx

@@ -5,8 +5,9 @@ sidebar_order: 20
 ---
 
 <Alert level="info">
-React Router v6 support is included in the `@sentry/react` package since version `7`.
-React Router v7 support is included in the `@sentry/react` package since version `8.42.0`.
+- React Router v6 support is included in the `@sentry/react` package since version `7`.
+- React Router v7 support is included in the `@sentry/react` package since version `8.42.0`.
+- React Router v7 in framework mode is not yet supported.
 </Alert>
 
 Update your `Sentry.browserTracingIntegration` to `Sentry.reactRouterV{6|7}BrowserTracingIntegration` and provide the required React hooks and router functions:
@@ -30,7 +31,7 @@ For React Router v6 this is available in `@sentry/react` version `7.21.0` and ab
 If you choose to create your router instance with [`createBrowserRouter`](https://reactrouter.com/en/main/routers/create-browser-router) from the `react-router-dom` package, you can use `Sentry.wrapCreateBrowserRouterV{6|7}` to wrap it with the instrumentation:
 
 
-```javascript {2-8, 15-21, 26-33} {tabTitle: v6}
+```javascript {2-8, 15-21, 26-33} {tabTitle: Version 6}
 import React from "react";
 import {
   createBrowserRouter,
@@ -64,7 +65,7 @@ const router = sentryCreateBrowserRouter([
 ]);
 ```
 
-```javascript {2-8, 15-21, 26-33} {tabTitle: v7}
+```javascript {2-8, 15-21, 26-33} {tabTitle: Version 7}
 import React from "react";
 import {
   createBrowserRouter,
@@ -110,7 +111,7 @@ You can instrument [`createMemoryRouter`](https://reactrouter.com/en/main/router
 If you're using the `<Routes />` component to define your routes, wrap [`Routes`](https://reactrouter.com/en/main/components/routes) using `Sentry.withSentryReactRouterV{6|7}Routing`. This creates a higher order component, which will enable Sentry to reach your router context. You can also use `Sentry.withSentryReactRouterV{6|7}Routing` for `Routes` inside `BrowserRouter`. `MemoryRouter`, and `HashRouter` components:
 
 
-```javascript {3-11, 18-24, 29, 33-35} {tabTitle: v6}
+```javascript {3-11, 18-24, 29, 33-35} {tabTitle: Version 6}
 import React from "react";
 import ReactDOM from "react-dom";
 import {
@@ -150,7 +151,7 @@ ReactDOM.render(
 );
 ```
 
-```javascript {3-11, 18-24, 29, 33-35} {tabTitle: v7}
+```javascript {3-11, 18-24, 29, 33-35} {tabTitle: Version 7}
 import React from "react";
 import ReactDOM from "react-dom";
 import {
@@ -207,7 +208,7 @@ If you specify your route definitions as an object to the [`useRoutes` hook](htt
 </Alert>
 
 
-```javascript {2-10, 15-21, 26, 29-31} {tabTitle: v6}
+```javascript {2-10, 15-21, 26, 29-31} {tabTitle: Version 6}
 import React from "react";
 import {
   createRoutesFromChildren,
@@ -249,7 +250,7 @@ ReactDOM.render(
 );
 ```
 
-```javascript {2-10, 15-21, 26, 29-31} {tabTitle: v7}
+```javascript {2-10, 15-21, 26, 29-31} {tabTitle: Version 7}
 import React from "react";
 import {
   createRoutesFromChildren,
@@ -304,7 +305,7 @@ Note, that this only applies to render method and lifecycle errors since React d
 
 To send errors to Sentry while using a custom error boundary, use the `Sentry.captureException` method:
 
-```jsx {11, 28} {tabTitle: v6}
+```jsx {11, 28} {tabTitle: Version 6}
 // router setup
 const sentryCreateBrowserRouter = wrapCreateBrowserRouterV6(createBrowserRouter);
 const router = sentryCreateBrowserRouter([
@@ -344,7 +345,7 @@ export function YourCustomRootErrorBoundary() {
 
 ```
 
-```jsx {11, 28} {tabTitle: v7}
+```jsx {11, 28} {tabTitle: Version 7}
 // router setup
 const sentryCreateBrowserRouter = wrapCreateBrowserRouterV7(createBrowserRouter);
 const router = sentryCreateBrowserRouter([