smash nav bugs

plugins/woocommerce-admin/client/settings/content.js

@@ -8,6 +8,10 @@ export const Content = ( { data } ) => {
 
 	console.log( settings );
 
+	if ( ! settings ) {
+		return null;
+	}
+
 	return (
 		<div>
 			{ settings.map( ( setting, idx ) => {

plugins/woocommerce-admin/client/settings/index.js

@@ -18,12 +18,13 @@ import './style.scss';
 
 const Settings = ( { params } ) => {
 	const settingsData = window.wcSettings?.admin?.settingsPages;
-	const { section } = getQuery();
 
+	// Be sure to render Settings slots when the params change.
 	useEffect( () => {
 		possiblyRenderSettingsSlots();
 	}, [ params ] );
 
+	// Register the slot fills for the settings page just once.
 	useEffect( () => {
 		registerTaxSettingsConflictErrorFill();
 		registerPaymentsSettingsBannerFill();
@@ -34,6 +35,13 @@ const Settings = ( { params } ) => {
 		return <div>Error getting data</div>;
 	}
 
+	const { section } = getQuery();
+	const sections = settingsData[ params.page ]?.sections;
+	const contentData =
+		Array.isArray( sections ) && sections.length === 0
+			? {}
+			: sections[ section || '' ];
+
 	return (
 		<>
 			<Tabs data={ settingsData } page={ params.page }>
@@ -45,13 +53,7 @@ const Settings = ( { params } ) => {
 						/>
 					</div>
 					<div className="woocommerce-settings-content">
-						<Content
+						<Content data={ contentData } />
-							data={
-								settingsData[ params.page ].sections[
-									section || ''
-								]
-							}
-						/>
 					</div>
 				</div>
 			</Tabs>

plugins/woocommerce-admin/client/settings/tabs.js

@@ -6,7 +6,7 @@ import { getNewPath, navigateTo } from '@woocommerce/navigation';
 
 export const Tabs = ( { data, page, children } ) => {
 	const onSelect = ( tabName ) => {
-		const url = getNewPath( {}, `/settings/${ tabName }` );
+		const url = getNewPath( {}, `/settings/${ tabName }`, {} );
 		navigateTo( { url } );
 	};