Pass siteSlug as component prop

Author: taipeicoder

client/dashboard/app/router.tsx

@@ -112,7 +112,7 @@ const siteSettingsRoute = createRoute( {
 } ).lazy( () =>
 	import( '../sites/settings' ).then( ( d ) =>
 		createLazyRoute( 'site-settings' )( {
-			component: d.default,
+			component: () => <d.default siteSlug={ siteRoute.useParams().siteSlug } />,
 		} )
 	)
 );
@@ -125,7 +125,7 @@ const siteSettingsSiteVisibilityRoute = createRoute( {
 } ).lazy( () =>
 	import( '../sites/settings-site-visibility' ).then( ( d ) =>
 		createLazyRoute( 'site-settings-site-visibility' )( {
-			component: d.default,
+			component: () => <d.default siteSlug={ siteRoute.useParams().siteSlug } />,
 		} )
 	)
 );
@@ -138,7 +138,7 @@ const siteSettingsSubscriptionGiftingRoute = createRoute( {
 } ).lazy( () =>
 	import( '../sites/settings-subscription-gifting' ).then( ( d ) =>
 		createLazyRoute( 'site-settings-subscription-gifting' )( {
-			component: d.default,
+			component: () => <d.default siteSlug={ siteRoute.useParams().siteSlug } />,
 		} )
 	)
 );

client/dashboard/sites/settings-site-visibility/index.tsx

@@ -2,14 +2,12 @@ import { useQuery, useMutation } from '@tanstack/react-query';
 import { Card, CardBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { siteQuery, siteSettingsMutation, siteSettingsQuery } from '../../app/queries';
-import { siteSettingsSiteVisibilityRoute } from '../../app/router';
 import PageLayout from '../../components/page-layout';
 import SettingsPageHeader from '../settings-page-header';
 import { LaunchForm } from './launch-form';
 import { PrivacyForm } from './privacy-form';
 
-export default function SiteVisibilitySettings() {
-	const { siteSlug } = siteSettingsSiteVisibilityRoute.useParams();
+export default function SiteVisibilitySettings( { siteSlug }: { siteSlug: string } ) {
 	const { data: siteData } = useQuery( siteQuery( siteSlug ) );
 	const { data: settings } = useQuery( siteSettingsQuery( siteSlug ) );
 	const mutation = useMutation( siteSettingsMutation( siteSlug ) );

client/dashboard/sites/settings-subscription-gifting/index.tsx

@@ -4,7 +4,6 @@ import { notFound } from '@tanstack/react-router';
 import { Card, CardBody, ToggleControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { siteQuery, siteSettingsMutation, siteSettingsQuery } from '../../app/queries';
-import { siteSettingsSubscriptionGiftingRoute } from '../../app/router';
 import PageLayout from '../../components/page-layout';
 import SettingsPageHeader from '../settings-page-header';
 import { hasSubscriptionGiftingFeature } from './utils';
@@ -36,8 +35,7 @@ const form = {
 	fields,
 };
 
-export default function SubscriptionGiftingSettings() {
-	const { siteSlug } = siteSettingsSubscriptionGiftingRoute.useParams();
+export default function SubscriptionGiftingSettings( { siteSlug }: { siteSlug: string } ) {
 	const { data: siteData } = useQuery( siteQuery( siteSlug ) );
 	const { data } = useQuery( siteSettingsQuery( siteSlug ) );
 	const mutation = useMutation( siteSettingsMutation( siteSlug ) );

client/dashboard/sites/settings/index.tsx

@@ -6,14 +6,12 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { siteQuery, siteSettingsQuery } from '../../app/queries';
-import { siteRoute } from '../../app/router';
 import { PageHeader } from '../../components/page-header';
 import PageLayout from '../../components/page-layout';
 import SiteVisibilitySettingsSummary from '../settings-site-visibility/summary';
 import SubscriptionGiftingSettingsSummary from '../settings-subscription-gifting/summary';
 
-export default function SiteSettings() {
-	const { siteSlug } = siteRoute.useParams();
+export default function SiteSettings( { siteSlug }: { siteSlug: string } ) {
 	const { data: siteData } = useQuery( siteQuery( siteSlug ) );
 	const { data: settings } = useQuery( siteSettingsQuery( siteSlug ) );