Исправлена ошибка в назначении Breadcrumb.Item

src/components/LayoutPortal.tsx

@@ -114,7 +114,7 @@ const _LayoutPortal = memo(() => {
                                             <a style={{ userSelect: 'none' }} onClick={() => setWellsTreeOpen((prev) => !prev)}>{currentWell}</a>
                                         </Breadcrumb.Item>
                                     )}
-                                    {breadcrumb}
+                                    {breadcrumb !== true && breadcrumb}
                                 </Breadcrumb>
                             )}
                             {topRightBlock}

src/components/MenuBreadcrumb.tsx

@@ -1,10 +1,9 @@
 import { Breadcrumb, BreadcrumbItemProps } from 'antd'
-import { Link, useLocation } from 'react-router-dom'
+import { Link } from 'react-router-dom'
-import { memo, useMemo } from 'react'
 import { join } from 'path'
 
 import { PrivateWellMenuItem } from '@components/PrivateWellMenu'
-import { FunctionalValue, useFunctionalValue } from '@utils'
+import { FunctionalValue, getFunctionalValue, } from '@utils'
 
 export const makeBreadcrumbItems = (items: PrivateWellMenuItem[], pathParts: string[], root: string = '/') => {
     const out = []
@@ -22,35 +21,26 @@ export const makeBreadcrumbItems = (items: PrivateWellMenuItem[], pathParts: str
     return out
 }
 
-export type MenuBreadcrumbItemsProps = {
+export const makeMenuBreadcrumbItems = (
-    menuItems: PrivateWellMenuItem[]
+    menuItems: PrivateWellMenuItem[],
-    pathRoot?: RegExp
+    path: string,
-    itemsProps?: FunctionalValue<(item: PrivateWellMenuItem) => BreadcrumbItemProps>
+    pathRoot: RegExp = /^\//,
-    itemRender?: (item: PrivateWellMenuItem) => JSX.Element
+    itemsProps?: FunctionalValue<(item: PrivateWellMenuItem) => BreadcrumbItemProps>,
+    itemRender?: (item: PrivateWellMenuItem) => JSX.Element,
+) => {
+    const getItemProps = getFunctionalValue(itemsProps)
+
+    const rootPart = pathRoot.exec(path)
+    if (!rootPart || rootPart.length <= 0) return []
+    const root = rootPart[0]
+    const parts = path.trim().slice(root.length).split('/')
+    const items = makeBreadcrumbItems(menuItems, parts, root)
+
+    return items.map((item) => (
+        <Breadcrumb.Item key={item.route} {...getItemProps(item)}>
+            {itemRender ? itemRender(item) : (
+                <Link to={item.route}>{item.title}</Link>
+            )}
+        </Breadcrumb.Item>
+    ))
 }
-
-export const MenuBreadcrumbItems = memo<MenuBreadcrumbItemsProps>(({ menuItems, pathRoot = /^\//, itemsProps, itemRender }) => {
-    const location = useLocation()
-    const getItemProps = useFunctionalValue(itemsProps)
-
-    const items = useMemo(() => {
-        const path = location.pathname
-        const rootPart = pathRoot.exec(path)
-        if (!rootPart || rootPart.length <= 0) return []
-        const root = rootPart[0]
-        const parts = path.trim().slice(root.length).split('/')
-        return makeBreadcrumbItems(menuItems, parts, root)
-    }, [location, menuItems, pathRoot])
-
-    return (
-        <>
-            {items.map((item) => (
-                <Breadcrumb.Item key={item.route} {...getItemProps(item)}>
-                    {itemRender ? itemRender(item) : (
-                        <Link to={item.route}>{item.title}</Link>
-                    )}
-                </Breadcrumb.Item>
-            ))}
-        </>
-    )
-})

src/pages/AdminPanel/index.jsx

@@ -1,9 +1,9 @@
-import { Navigate, Route, Routes } from 'react-router-dom'
+import { Navigate, Route, Routes, useLocation } from 'react-router-dom'
-import { lazy, memo, useMemo } from 'react'
+import { lazy, memo, useEffect, useMemo } from 'react'
 
 import { RootPathContext, useLayoutProps, useRootPath } from '@asb/context'
 import { FastRunMenu } from '@components/FastRunMenu'
-import { MenuBreadcrumbItems } from '@components/MenuBreadcrumb'
+import { makeMenuBreadcrumbItems } from '@components/MenuBreadcrumb'
 import { NoAccessComponent, withPermissions } from '@utils'
 
 import { AdminNavigationMenu, menuItems } from './AdminNavigationMenu'
@@ -21,18 +21,21 @@ const TelemetryViewer = lazy(() => import('./Telemetry/TelemetryViewer'))
 const TelemetryMerger = lazy(() => import('./Telemetry/TelemetryMerger'))
 const VisitLog = lazy(() => import('./VisitLog'))
 
-const layoutProps = {
-    sider: <AdminNavigationMenu />,
-    title: 'Администраторская панель',
-    isAdmin: true,
-    breadcrumb: <MenuBreadcrumbItems menuItems={menuItems} pathRoot={/^\/admin\//} />,
-}
-
 const AdminPanel = memo(() => {
+    const location = useLocation()
     const root = useRootPath()
     const rootPath = useMemo(() => `${root}/admin`, [root])
 
-    useLayoutProps(layoutProps)
+    const setLayoutProps = useLayoutProps()
+
+    useEffect(() => {
+        setLayoutProps({
+            sider: <AdminNavigationMenu />,
+            title: 'Администраторская панель',
+            isAdmin: true,
+            breadcrumb: makeMenuBreadcrumbItems(menuItems, location.pathname, /^\/admin\//),
+        })
+    }, [location.pathname])
 
     return (
         <RootPathContext.Provider value={rootPath}>

src/pages/Well/index.jsx

@@ -4,7 +4,7 @@ import { Navigate, Route, Routes, useLocation, useParams } from 'react-router-do
 import { WellContext, RootPathContext, useRootPath, useLayoutProps, TopRightBlockContext } from '@asb/context'
 import { FastRunMenu } from '@components/FastRunMenu'
 import { invokeWebApiWrapperAsync } from '@components/factory'
-import { MenuBreadcrumbItems } from '@components/MenuBreadcrumb'
+import { makeMenuBreadcrumbItems } from '@components/MenuBreadcrumb'
 import { NoAccessComponent, withPermissions } from '@utils'
 import { WellService } from '@api'
 
@@ -78,9 +78,9 @@ const Well = memo(() => {
 
     useEffect(() => setLayoutProps({
         sider: <NavigationMenu idWell={well.id} />,
-        breadcrumb: <MenuBreadcrumbItems menuItems={menuItems} pathRoot={/^\/well\/[0-9]+\//} />,
+        breadcrumb: makeMenuBreadcrumbItems(menuItems, location.pathname, /^\/well\/[0-9]+\//),
         topRightBlock: topRightBlock,
-    }), [well, setLayoutProps, topRightBlock])
+    }), [well, location.pathname, setLayoutProps, topRightBlock])
 
     useEffect(() => setTopRightBlock(undefined), [location])