useSelectedLayoutSegment -> useSelectedLayoutSegments, add useSelectedLayoutSegment with previous behavior (#41693)

packages/next/client/components/navigation.ts

@@ -140,11 +140,26 @@ function getSelectedLayoutSegmentPath(
 
 // TODO-APP: Expand description when the docs are written for it.
 /**
- * Get the canonical segment path from this level to the leaf node.
+ * Get the canonical segment path from the current level to the leaf node.
  */
-export function useSelectedLayoutSegment(
+export function useSelectedLayoutSegments(
   parallelRouteKey: string = 'children'
 ): string[] {
   const { tree } = useContext(LayoutRouterContext)
   return getSelectedLayoutSegmentPath(tree, parallelRouteKey)
 }
+
+// TODO-APP: Expand description when the docs are written for it.
+/**
+ * Get the segment below the current level
+ */
+export function useSelectedLayoutSegment(
+  parallelRouteKey: string = 'children'
+): string {
+  const selectedLayoutSegments = useSelectedLayoutSegments(parallelRouteKey)
+  if (selectedLayoutSegments.length === 0) {
+    throw new Error('No selected layout segment below the current level')
+  }
+
+  return selectedLayoutSegments[0]
+}

test/e2e/app-dir/app-edge/app/app-edge/layout.tsx

@@ -2,10 +2,10 @@
 
 // TODO-APP: support typing for useSelectedLayoutSegment
 // @ts-ignore
-import { useSelectedLayoutSegment } from 'next/navigation'
+import { useSelectedLayoutSegments } from 'next/navigation'
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   // useSelectedLayoutSegment should not be thrown
-  useSelectedLayoutSegment()
+  useSelectedLayoutSegments()
   return children
 }

test/e2e/app-dir/app/app/hooks/use-selected-layout-segment/first/[dynamic]/(group)/second/[...catchall]/page.js

@@ -1,9 +1,9 @@
 'use client'
 
-import { useSelectedLayoutSegment } from 'next/navigation'
+import { useSelectedLayoutSegments } from 'next/navigation'
 
 export default function Page() {
-  const selectedLayoutSegment = useSelectedLayoutSegment()
+  const selectedLayoutSegment = useSelectedLayoutSegments()
 
   return (
     <p id="page-layout-segments">{JSON.stringify(selectedLayoutSegment)}</p>

test/e2e/app-dir/app/app/hooks/use-selected-layout-segment/first/layout.js

@@ -1,9 +1,9 @@
 'use client'
 
-import { useSelectedLayoutSegment } from 'next/navigation'
+import { useSelectedLayoutSegments } from 'next/navigation'
 
 export default function Layout({ children }) {
-  const selectedLayoutSegment = useSelectedLayoutSegment()
+  const selectedLayoutSegment = useSelectedLayoutSegments()
 
   return (
     <>

test/e2e/app-dir/app/app/hooks/use-selected-layout-segment/layout.js

@@ -1,9 +1,9 @@
 'use client'
 
-import { useSelectedLayoutSegment } from 'next/navigation'
+import { useSelectedLayoutSegments } from 'next/navigation'
 
 export default function Layout({ children }) {
-  const selectedLayoutSegment = useSelectedLayoutSegment()
+  const selectedLayoutSegment = useSelectedLayoutSegments()
 
   return (
     <>

test/e2e/app-dir/app/app/nested-navigation/CategoryNav.js

@@ -1,10 +1,10 @@
 'use client'
 
 import { TabNavItem } from './TabNavItem'
-import { useSelectedLayoutSegment } from 'next/navigation'
+import { useSelectedLayoutSegments } from 'next/navigation'
 
 const CategoryNav = ({ categories }) => {
-  const selectedLayoutSegment = useSelectedLayoutSegment()
+  const selectedLayoutSegment = useSelectedLayoutSegments()
 
   return (
     <div style={{ display: 'flex' }}>

test/e2e/app-dir/app/app/nested-navigation/[categorySlug]/SubCategoryNav.js

@@ -1,10 +1,10 @@
 'use client'
 
 import { TabNavItem } from '../TabNavItem'
-import { useSelectedLayoutSegment } from 'next/navigation'
+import { useSelectedLayoutSegments } from 'next/navigation'
 
 const SubCategoryNav = ({ category }) => {
-  const selectedLayoutSegment = useSelectedLayoutSegment()
+  const selectedLayoutSegment = useSelectedLayoutSegments()
 
   return (
     <div style={{ display: 'flex' }}>