src/Components/Structural/Breadcrumb/Breadcrumb.js
/**
 * @function Breadcrumb
 * @description A stylized breadcrumb link to render on the site. This component
 * takes no arguments, but creates the breadcrumbs automatically from the url.
 * @author Alexander Burdiss
 * @since 5/27/21
 * @version 2.2.1
 * @component
 * @example
 * <Breadcrumb />
 */
@function Breadcrumb
@description A stylized breadcrumb link to render on the site. This component
takes no arguments, but creates the breadcrumbs automatically from the url.
@function Breadcrumb @description A stylized breadcrumb link to render on the site . This component takes no arguments but creates the breadcrumbs automatically from the url .
function Breadcrumb() {
  const [pathParts, setPathParts] = useState([]);
  const location = useLocation();
  useEffect(
    function getCurrentUrl() {
      if (location.pathname) {
        let currentPath = location.pathname;
        if (currentPath[0] == "/") {
          currentPath = currentPath.slice(1);
        }
        if (currentPath[currentPath.length - 1] == "/") {
          currentPath = currentPath.slice(0, currentPath.length - 1);
        }
        const tempPathParts = currentPath.split("/");
        tempPathParts.pop();
        setPathParts(tempPathParts);
      }
    },
    [location]
  );
  return pathParts && pathParts.length ? (
    <div className="Breadcrumb-Outer">
      <div className="Breadcrumb-Inner">
        {pathParts.map((crumb, index) => {
          if (!crumb) {
            return null;
          }
          let path = "";
          for (let i = 0; i <= index; i++) {
            path += "/" + pathParts[i];
          }
          return (
            <span className="Breadcrumb-Text" key={index}>
              <Link className="Breadcrumb-Link" to={path}>
                <span>{capitalize(crumb.replace("-", " "))}</span>
              </Link>
            </span>
          );
        })}
      </div>
    </div>
  ) : null;
}
function Breadcrumb ( ) { const [ pathParts , setPathParts ] = useState ( [ ] ) ; const location = useLocation ( ) ; useEffect ( function getCurrentUrl ( ) { if ( location . pathname ) { let currentPath = location . pathname ; if ( currentPath [ 0 ] == "/" ) { currentPath = currentPath . slice ( 1 ) ; } if ( currentPath [ currentPath . length - 1 ] == "/" ) { currentPath = currentPath . slice ( 0 , currentPath . length - 1 ) ; } const tempPathParts = currentPath . split ( "/" ) ; tempPathParts . pop ( ) ; setPathParts ( tempPathParts ) ; } } , [ location ] ) ; return pathParts && pathParts . length ? ( < div className = "Breadcrumb-Outer" > < div className = "Breadcrumb-Inner" > { pathParts . map ( ( crumb , index ) => { if ( ! crumb ) { return null ; } let path = "" ; for ( let i = 0 ; i <= index ; i ++ ) { path += "/" + pathParts [ i ] ; } return ( < span className = "Breadcrumb-Text" key = { index } > < Link className = "Breadcrumb-Link" to = { path } > < span > { capitalize ( crumb . replace ( "-" , " " ) ) } < / span > < / Link > < / span > ) ; } ) } < / div > < / div > ) : null ; }
@function Breadcrumb
 @description A stylized breadcrumb link to render on the site.
@function Breadcrumb @description A stylized breadcrumb link to render on the site .
// Remove leading / // Remove trailing / // Remove current path from breadcrumbs