在 React 中实现多行面包屑链接的最佳方法是什么？

Question

Answers to this question are eligible for a +50 reputation bounty . Bounty grace period has ended. Naveen wants to to this question.

I am trying to implement a multiline breadcrumb links for mobile/tablet devices. User will be navigating through multiple folders and if it exceeds the max lines configured of breadcrumb link container I am dropping out links from beginning (trying to show maximum path from current path). Couldn't find a css method for this. Please find an example below with max line = 2

current path = 
path1 / path2 
/ path3 / path4
/path5

exceeds at path5 (went to 3rd line should update the link to

updated path = 
.../ path2 
/ path3 / path4

if user navigates back should updates without the ellipse. I tried the below methods, didn't work out as expected -

1. css way to clamp to max lines // it didn't work since we need to find how many links to trim
2. Using white-space: no wrap and text-overflow: ellipse , I can't use it since it wont allow multiline
3. tried to find maximum number of characters fit in a single line of div using expression - Width(in pixel) * Font Constant / font Size (in pixels)

Figured out width and font size dynamically. but couldn't figure out how to get the font constant of an element. Any help, greatly appreciated.

Answer 1

I created a demo component here. Hope it will be helpful.
The strategy I'm using here is:

1. Count lines by dividing the height of the wrapper by the line height
2. Remove items from the beginning until the number of lines is reduced to the maximum allowed

Breadcrumbs.js

import { createRef, useEffect, useState } from "react";
import "./Breadcrumbs.css";

function Breadcrumbs() {

    const wrapper = createRef();
    const ellipsis = createRef();
    const [items, setItems] = useState([]);
    const [dropped, setDropped] = useState(false);

    const countLines = (element, lineHeight) => {
        let height = element.offsetHeight;
        let lines = height / lineHeight;
        return Math.round(lines);
    }

    useEffect(() => {
        setItems(window.location.pathname.split("/").filter((e) => e.length > 0))
    }, [window.location.pathname])

    useEffect(() => {
        const lines = countLines(wrapper.current, ellipsis.current.clientHeight);
        const maxLines = 2;

        if (lines > maxLines) {
            setItems(items.slice(1));
            setDropped(true);
        }
    }, [items])

    return <nav className="breadcrumbs-wrapper" ref={wrapper}>
        <span ref={ellipsis}>
            {dropped ? "..." : ""}
        </span>
        {items.map((item, index) => {
            return <span key={index.toString()}>
                <span>&nbsp;/&nbsp;</span>
                <a href="#">{item}</a>
            </span>
        })}
    </nav>
}

export default Breadcrumbs;

Breadcrumbs.css

.breadcrumbs-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

Here are screenshots of the working example

Answer 2

import React from 'react'; import { Link, useLocation } from 'react-router-dom';

const Breadcrumb = ({ handleDrawerOpen, open }) => {
   const { pathname } = useLocation();

   const pathName = (paths, index) => {
      return paths.filter((path, pathIndex) => pathIndex !== 0 && pathIndex <= index).join('/');
   };
   
   const func = () => {
      const paths = pathname.split('/');
      return paths.map(
         (path, index) =>
            index !== 0 && (
               <Link
                  style={{
                     textDecoration: 'none',
                     color: index === paths.length - 1 ? '#49C5B6' : 'white',
                  }}
                  to={`/${pathName(paths, index)}`}>{`${
                  path?.charAt(0)?.toUpperCase() + path.slice(1).toLowerCase()
               } ${index !== paths.length - 1 ? '>' : ''} `}</Link>
            )
      );
   };
   return (
      <Box>
         {!open && (
            <IconButton onClick={handleDrawerOpen}>
               <MenuIcon />
            </IconButton>
         )}

         <Profile />
      </Box>
   );
};

export default Breadcrumb;

Answer 3

You can slice last 5 items and map through them to render the links:

breadcrumbs.slice(-5).map((breadcrumb, index) => (
<React.Fragment key={index}>
  {index !== 0 && breadcrumbs.length > 1 ? ' / ' : ''}
  {index === 0 && breadcrumb.path !== breadcrumbs[0].path ? (
    '...'
  ) : (
    <a href={breadcrumb.link}>{breadcrumb.path}</a>
  )}
  {index % 2 ? <br /> : ''}
</React.Fragment>

Here's a demo representing your requirement.