JS实现面包屑导航功能从零开始示例
作者：寒露
这篇文章主要为大家介绍了JS实现面包屑导航功能从零开始示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
面包屑导航
url：domain/path/[[…path]]
目前可以通过 url 的的结构信息定位当前目录的情况，但是无法快速的前进与后退。所以使用“面包屑”来完成这一功能
功能实现
安装依赖
cd /explorer pnpm i axios ahooks
文件树
explorer/src/app/path/[[...path]]/layout.tsx
explorer/src/app/path/api/readdir/route.ts
explorer/src/components/breadcrumb-dropdown-readdir/index.tsx
explorer/src/components/explorer-breadcrumb/index.tsx
explorer/src/components/use-replace-pathname.ts
文件路径：explorer/src/app/path/api/readdir/route.ts
新增一个获取指定目录的接口
import { NextRequest, NextResponse } from 'next/server'
import { readdir } from '@/explorer-manager/src/main.mjs'
export type SearchParamsType = {
path: string
only_dir: '0' | '1'
only_file: '0' | '1'
has_file_stat: '0' | '1'
}
export const GET = async (req: NextRequest) => {
const { path, only_dir, only_file, has_file_stat } = Object.fromEntries(req.nextUrl.searchParams) as SearchParamsType
return NextResponse.json({ readdir: readdir(path, { only_dir, only_file, has_file_stat }) })
}文件路径：explorer/src/app/path/[[...path]]/layout.tsx
将面包屑组件添加至 layout 的 Card 组件 title 部分。
import React from 'react'
import { readdir } from '@/explorer-manager/src/main.mjs'
import { PathContextProvider } from '@/app/path/context'
import { Card } from 'antd'
import ExplorerBreadcrumb from '@/components/explorer-breadcrumb'
const Layout: React.FC<React.PropsWithChildren & { params: { path: string[] } }> = ({
children,
params: { path = [] },
}) => {
const readdirList = readdir(path.join('/'), { only_dir: '0', only_file: '0', has_file_stat: '1' })
return (
<PathContextProvider value={readdirList}>
<Card title={<ExplorerBreadcrumb />}>{children}</Card>
</PathContextProvider>
)
}
export default Layout文件路径：explorer/src/components/explorer-breadcrumb/index.tsx
面包屑组件，使用 Antd 的 Breadcrumb 组件。跟目录"/"使用 home icon 替代
'use client'
import React from 'react'
import Link from 'next/link'
import { HomeOutlined } from '@ant-design/icons'
import { usePathname } from 'next/navigation'
import { Breadcrumb, Space } from 'antd'
import BreadcrumbDropdownReaddir from '@/components/breadcrumb-dropdown-readdir'
type ItemType = { title: string; href: string }
const ExplorerBreadcrumb: React.FC = () => {
const pathname = usePathname() || ''
return (
<Space>
<Breadcrumb
items={decodeURIComponent(pathname)
.split('/')
.filter(Boolean)
.reduce<ItemType[]>((p, c) => {
const last = p[p.length - 1]
return p.concat({ title: c, href: [last?.href, c].join('/') })
}, [])
.map(({ title, href }, k, { length }) => {
return {
title:
length === k + 1 && length !== 1 ? (
title
) : (
<BreadcrumbDropdownReaddir title={title} href={href}>
<Link href={href}>{k === 0 ? <HomeOutlined /> : title}</Link>
</BreadcrumbDropdownReaddir>
),
}
})}
/>
</Space>
)
}
export default ExplorerBreadcrumb文件路径：explorer/src/components/breadcrumb-dropdown-readdir/index.tsx
鼠标 hover 某个路径时，下拉出现当前路径下文件夹菜单，方便快速跳转。
当菜单超出最大高度时滚动显示。会高亮当前路径上的文件。使用 dom 的 scrollIntoView 方法，确保高亮的菜单在可视区域内。
显示时对菜单项进行 decodeURIComponent 处理，保证显示的文本正确。
import React, { useRef } from 'react'
import { Dropdown, Menu } from 'antd'
import { useMount, useRequest } from 'ahooks'
import axios from 'axios'
import { ReaddirListType } from '@/explorer-manager/src/type'
import { encodePathItem, pathExp } from '@/components/use-replace-pathname'
import Link from 'next/link'
import { FolderOpenOutlined, FolderOutlined } from '@ant-design/icons'
import { usePathname } from 'next/navigation'
const ScrollIntoView: React.FC<{ is_open: boolean; className?: string }> = ({ is_open, className }) => {
const ref = useRef<HTMLDivElement>(null)
useMount(() => {
is_open && ref.current?.scrollIntoView({ block: 'center', behavior: 'instant' })
})
return is_open ? <FolderOpenOutlined ref={ref} className={className} /> : <FolderOutlined className={className} />
}
const BreadcrumbDropdownReaddir: React.FC<React.PropsWithChildren & { title: string; href: string }> = ({
children,
href,
title,
}) => {
const pathname = usePathname() || ''
const { data = [], runAsync } = useRequest(
() =>
axios
.get<{ readdir: ReaddirListType }>('/path/api/readdir', {
params: { path: href.replace(pathExp, ''), only_dir: 1 },
})
.then(({ data: { readdir } }) => {
return readdir
}),
{ manual: true, cacheKey: `readdir-${href}`, staleTime: 60 * 1000 },
)
const open_dit_text =
decodeURIComponent(pathname).split([title, '/'].join('')).pop()?.split('/').filter(Boolean).shift() || ''
return (
<Dropdown
destroyPopupOnHide={true}
arrow={true}
trigger={['hover']}
dropdownRender={() => {
return (
<Menu
selectedKeys={[open_dit_text]}
style={{ maxHeight: '50vw', overflow: 'scroll' }}
items={data?.map((item) => {
const is_open = open_dit_text === item.name
return {
label: (
<Link href={encodePathItem(`${href}/${item.name}`)} prefetch={false}>
{item.name}
</Link>
),
key: item.name,
icon: <ScrollIntoView is_open={is_open} />,
}
})}
/>
)
}}
onOpenChange={(open) => {
open && runAsync().then()
}}
>
{children}
</Dropdown>
)
}
export default BreadcrumbDropdownReaddir文件路径：explorer/src/components/use-replace-pathname.ts
对路径进行操作 hooks 文件，对路径字符串项 encodeURIComponent 处理
export const pathExp = /(^\/)?path/
export const encodePathItem = (path: string) => {
return path
.split('/')
.map((text) => encodeURIComponent(text))
.join('/')
}效果
git-repo
以上就是JS实现面包屑导航功能从零开始示例的详细内容，更多关于JS面包屑导航的资料请关注脚本之家其它相关文章！