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

@@ -1,5 +1,4 @@
 import { useQuery, useMutation } from '@tanstack/react-query';
-import { useParams } from '@tanstack/react-router';
 import { Card, CardBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { siteQuery, siteSettingsMutation, siteSettingsQuery } from '../../app/queries';
@@ -8,8 +7,7 @@ import SettingsPageHeader from '../settings-page-header';
 import { LaunchForm } from './launch-form';
 import { PrivacyForm } from './privacy-form';
 
-export default function SiteVisibilitySettings() {
-	const { siteSlug } = useParams( { strict: false } );
+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

@@ -1,6 +1,6 @@
 import { DataForm } from '@automattic/dataviews';
 import { useQuery, useMutation } from '@tanstack/react-query';
-import { notFound, useParams } from '@tanstack/react-router';
+import { notFound } from '@tanstack/react-router';
 import { Card, CardBody, ToggleControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { siteQuery, siteSettingsMutation, siteSettingsQuery } from '../../app/queries';
@@ -35,8 +35,7 @@ const form = {
 	fields,
 };
 
-export default function SubscriptionGiftingSettings() {
-	const { siteSlug } = useParams( { strict: false } );
+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

@@ -1,5 +1,4 @@
 import { useQuery } from '@tanstack/react-query';
-import { useParams } from '@tanstack/react-router';
 import {
 	__experimentalHeading as Heading,
 	__experimentalVStack as VStack,
@@ -12,8 +11,7 @@ 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 } = useParams( { strict: false } );
+export default function SiteSettings( { siteSlug }: { siteSlug: string } ) {
 	const { data: siteData } = useQuery( siteQuery( siteSlug ) );
 	const { data: settings } = useQuery( siteSettingsQuery( siteSlug ) );