Function OuterLayoutRouter

packages/next/src/client/components/layout-router.tsx:599–860

({
  parallelRouterKey,
  error,
  errorStyles,
  errorScripts,
  templateStyles,
  templateScripts,
  template,
  notFound,
  forbidden,
  unauthorized,
  segmentViewBoundaries,
}: {
  parallelRouterKey: string
  error: ErrorComponent | undefined
  errorStyles: React.ReactNode | undefined
  errorScripts: React.ReactNode | undefined
  templateStyles: React.ReactNode | undefined
  templateScripts: React.ReactNode | undefined
  template: React.ReactNode
  notFound: React.ReactNode | undefined
  forbidden: React.ReactNode | undefined
  unauthorized: React.ReactNode | undefined
  segmentViewBoundaries?: React.ReactNode
})

 * It can be rendered next to each other with a different `parallelRouterKey`, allowing for Parallel routes.
 */
export default function OuterLayoutRouter({
  parallelRouterKey,
  error,
  errorStyles,
  errorScripts,
  templateStyles,
  templateScripts,
  template,
  notFound,
  forbidden,
  unauthorized,
  segmentViewBoundaries,
}: {
  parallelRouterKey: string
  error: ErrorComponent | undefined
  errorStyles: React.ReactNode | undefined
  errorScripts: React.ReactNode | undefined
  templateStyles: React.ReactNode | undefined
  templateScripts: React.ReactNode | undefined
  template: React.ReactNode
  notFound: React.ReactNode | undefined
  forbidden: React.ReactNode | undefined
  unauthorized: React.ReactNode | undefined
  segmentViewBoundaries?: React.ReactNode
}) {
  const context = useContext(LayoutRouterContext)
  if (!context) {
    throw new Error('invariant expected layout router to be mounted')
  }

  const {
    parentTree,
    parentCacheNode,
    parentSegmentPath,
    parentParams,
    parentLoadingData,
    url,
    isActive,
    debugNameContext,
  } = context

  // Get the CacheNode for this segment by reading it from the parent segment's
  // child map.
  const parentTreeSegment = parentTree[0]
  const segmentPath =
    parentSegmentPath === null
      ? // TODO: The root segment value is currently omitted from the segment
        // path. This has led to a bunch of special cases scattered throughout
        // the code. We should clean this up.
        [parallelRouterKey]
      : parentSegmentPath.concat([parentTreeSegment, parallelRouterKey])

  // The "state" key of a segment is the one passed to React — it represents the
  // identity of the UI tree. Whenever the state key changes, the tree is
  // recreated and the state is reset. In the App Router model, search params do
  // not cause state to be lost, so two segments with the same segment path but
  // different search params should have the same state key.
  //