useSelectedLayoutSegment -> useSelectedLayoutSegments, add useSelectedLayoutSegment with previous behavior (#41693)
This commit is contained in:
parent
6687f280cf
commit
4f9e3bf0c2
7 changed files with 29 additions and 14 deletions
|
@ -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]
|
||||
}
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 (
|
||||
<>
|
||||
|
|
|
@ -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 (
|
||||
<>
|
||||
|
|
|
@ -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' }}>
|
||||
|
|
|
@ -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' }}>
|
||||
|
|
Loading…
Reference in a new issue