Next.js - useSelectedLayoutSegment() Function

---

---

The useSelectedLayoutSegment() Function

The Next.js useSelectedLayoutSegment() function is used to read the active route segment one level below the layout from which it is called. This function is only available in the client-side.

Syntax

The syntax for the useSelectedLayoutSegment() function is as follows:

'use client'
 
import { useSelectedLayoutSegment } from 'next/navigation'
 
const segment = useSelectedLayoutSegment(parallelRoutesKey?: string)

Parameters

The useSelectedLayoutSegment() function accepts one parameter, parallelRoutesKey. This parameter is optional and is used to specify the key of the parallel routes object. If this parameter is not provided, the function will use the default key of 'segments'.

Return Value

The useSelectedLayoutSegment() returns a string of the active segment or null if one doesn't exist. For example, given the Layouts and URLs below, the returned segment would be:

Example 1

In the example below, we are using the useSelectedLayoutSegment() function to access the active segment of the current page and display it in the console.

'use client'
 
import { useSelectedLayoutSegment } from 'next/navigation'
 
export default function ExampleClientComponent() {
  const segment = useSelectedLayoutSegment()
 
  console.log(segment)
 
  return (<div> Example client component </div>)
}

Output

Since the current URL is 'localhost:3000', console.log() returns 'null'.

Example 2

In the example below, we are using the useSelectedLayoutSegment() function to access the active segment of the current page and display it in the current page itself.

'use client'
 
import { useSelectedLayoutSegment } from 'next/navigation'
 
export default function ExampleClientComponent() {
  const segment = useSelectedLayoutSegment()
 
  return (
    <div>
      <h1>Current segment: {segment}</h1>
    </div>
  )
}

Output

Since the current URL is 'localhost:3000', the segment returned by the useSelectedLayoutSegment() function is 'null'.