[ALT-1508] fix: react-router import in gatsby spa to match the docs

examples/gatsby/gatsby-spa/package.json

@@ -21,8 +21,7 @@
     "gatsby": "^5.14.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-markdown": "^9.0.3",
-    "react-router": "^7.1.1"
+    "react-markdown": "^9.0.3"
   },
   "devDependencies": {
     "@types/node": "^20.11.19",

examples/gatsby/gatsby-spa/src/pages/[locale]/[slug].tsx

@@ -0,0 +1,30 @@
+import { useFetchBySlug, ExperienceRoot } from '@contentful/experiences-sdk-react';
+import { PageProps } from 'gatsby';
+import React from 'react';
+import { useContentfulClient } from '../../utils/useContentfulClient';
+
+type PathParams = {
+  locale: string;
+  slug: string,
+  isPreviewString: string;
+};
+
+const experienceTypeId = process.env.GATSBY_CTFL_EXPERIENCE_TYPE || '';
+
+export default function StudioExperiencePage(pageProps: PageProps) {
+  const { locale = 'en-US', slug = 'home-page', } = pageProps.params as PathParams;
+  const isPreview = new URL(pageProps.location.href).searchParams.get('isPreview') === 'true';
+  const { client } = useContentfulClient({ isPreview });
+
+  const { experience, error, isLoading } = useFetchBySlug({
+    slug,
+    localeCode: locale,
+    client,
+    experienceTypeId,
+  });
+
+  if (isLoading) return <div>Loading...</div>;
+  if (error) return <div>{error.message}</div>;
+
+  return <ExperienceRoot experience={experience} locale={locale} />;
+}

examples/gatsby/gatsby-spa/src/utils/useContentfulClient.ts

@@ -1,13 +1,12 @@
 import { useMemo } from 'react';
 import { createClient } from 'contentful';
-import { useLocation } from 'react-router';
 import '../studio-config'; // Update this file to set breakpoints, design tokens, and register components
 
-export const useContentfulClient = () => {
-  const location = useLocation();
-  const queryParams = new URLSearchParams(location.search);
-  const isPreview = queryParams.get('isPreview') === 'true';
+type Props = {
+  isPreview?: boolean;
+}
 
+export const useContentfulClient = ({isPreview}: Props) => {
   const client = useMemo(() => {
     const clientConfig = {
       space: process.env.GATSBY_CTFL_SPACE || '',