trigger the actual same level boundary

Author: huozhi

packages/next/src/client/components/layout-router.tsx

@@ -615,6 +615,21 @@ export default function OuterLayoutRouter({
       ? RenderChildren
       : ErrorBoundary
 
+    let segmentBoundaryTriggerNode: React.ReactNode = null
+    if (
+      process.env.NODE_ENV !== 'production' &&
+      process.env.__NEXT_DEVTOOL_SEGMENT_EXPLORER
+    ) {
+      const { SegmentBoundaryTriggerNode } =
+        require('../../next-devtools/userspace/app/segment-explorer-node') as typeof import('../../next-devtools/userspace/app/segment-explorer-node')
+
+      segmentBoundaryTriggerNode = (
+        <>
+          <SegmentBoundaryTriggerNode />
+        </>
+      )
+    }
+
     // TODO: The loading module data for a segment is stored on the parent, then
     // applied to each of that parent segment's parallel route slots. In the
     // simple case where there's only one parallel route (the `children` slot),
@@ -647,6 +662,7 @@ export default function OuterLayoutRouter({
                       cacheNode={cacheNode}
                       segmentPath={segmentPath}
                     />
+                    {segmentBoundaryTriggerNode}
                   </RedirectBoundary>
                 </HTTPAccessFallbackBoundary>
               </LoadingBoundary>

packages/next/src/next-devtools/userspace/app/segment-explorer-node.tsx

@@ -76,6 +76,19 @@ export function SegmentViewStateNode({ page }: { page: string }) {
   return null
 }
 
+export function SegmentBoundaryTriggerNode() {
+  const { boundaryType } = useSegmentState()
+  let segmentNode: React.ReactNode = null
+  if (boundaryType === 'loading') {
+    segmentNode = <LoadingSegmentNode />
+  } else if (boundaryType === 'not-found') {
+    segmentNode = <NotFoundSegmentNode />
+  } else if (boundaryType === 'error') {
+    segmentNode = <ErrorSegmentNode />
+  }
+  return segmentNode
+}
+
 export function SegmentViewNode({
   type,
   pagePath,
@@ -85,22 +98,9 @@ export function SegmentViewNode({
   pagePath: string
   children?: ReactNode
 }): React.ReactNode {
-  const { boundaryType } = useSegmentState()
-
-  const isChildBoundary = type !== 'layout' && type !== 'template'
-
-  let segmentNode = (
+  const segmentNode = (
     <SegmentTrieNode key={type} type={type} pagePath={pagePath} />
   )
-  if (boundaryType && boundaryType !== type && isChildBoundary) {
-    if (boundaryType === 'loading') {
-      segmentNode = <LoadingSegmentNode />
-    } else if (boundaryType === 'not-found') {
-      segmentNode = <NotFoundSegmentNode />
-    } else if (boundaryType === 'error') {
-      segmentNode = <ErrorSegmentNode />
-    }
-  }
 
   return (
     <>