Хлебные крошки и NextJS

ProgramBox

Хлебные крошки и NextJS

Post author:admin
Запись опубликована:24 февраля, 2023
Post category:Вопросы по программированию

#reactjs #next.js #breadcrumbs

#reactjs #next.js #панировочные сухари

Вопрос:

Я хотел бы создать хлебную крошку для моего приложения NextJS, и я хотел бы знать, есть ли хороший или практичный способ сделать это?

Я хотел бы изучить дизайн Ant, но пример компонента с React Router не хочет работать для меня.

Мне нужна ваша помощь, пожалуйста…

Ответ №1:

Если вы используете Next.js система маршрутизации Я предлагаю вам взглянуть на nextjs-breadcrumbs, она проста и эффективна.

Или, если вы предпочитаете писать свой собственный компонент, используйте их код в качестве ссылки.

 import React, { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import Link from 'next/link';

const convertBreadcrumb = string => {
  return string
    .replace(/-/g, ' ')
    .replace(/oe/g, 'ö')
    .replace(/ae/g, 'ä')
    .replace(/ue/g, 'ü')
    .toUpperCase();
};

const Breadcrumbs = () => {
  const router = useRouter();
  const [breadcrumbs, setBreadcrumbs] = useState(null);

  useEffect(() => {
    if (router) {
      const linkPath = router.asPath.split('/');
      linkPath.shift();

      const pathArray = linkPath.map((path, i) => {
        return { breadcrumb: path, href: '/'   linkPath.slice(0, i   1).join('/') };
      });

      setBreadcrumbs(pathArray);
    }
  }, [router]);

  if (!breadcrumbs) {
    return null;
  }

  return (
    <nav aria-label="breadcrumbs">
      <ol className="breadcrumb">
        <li>
          <a href="/">HOME</a>
        </li>
        {breadcrumbs.map((breadcrumb, i) => {
          return (
            <li key={breadcrumb.href}>
              <Link href={breadcrumb.href}>
                <a>
                  {convertBreadcrumb(breadcrumb.breadcrumb)}
                </a>
              </Link>
            </li>
          );
        })}
      </ol>
    </nav>
  );
};

export default Breadcrumbs;

Ответ №2:

Это мой подход к хлебным крошкам в nextjs, он использует router.asPath для получения ссылки на крошку и router.route для получения метки, если она существует в Route2LabelMap .

страницы/example.jsx

 export default function Page() {
  return <>
    <BreadCrumbs />
    <h1>My Page</h1>
  </>
}

компоненты/BreadCrumbs.jsx

 import Link from "next/link";
import { useRouter } from "next/router";
import React from "react";

/*
interface BreadCrumb {
  route: string;
  label: string;
  link: string;
}
*/

const Route2LabelMap = {
  "/": "Home",
  "/profile/[username]/barrels": "Your Barrels",
  "/barrels": "Barrel List",
  "/barrels/[barrel_id]": "Barrel",
  "/barrels/[barrel_id]/settings": "Settings",
};

export function BreadCrumbs() {
  const router = useRouter();

  const [crumbs, setCrumbs] = React.useState([]);

  React.useEffect(() => {
    const segmentsPath = router.asPath.split("/");
    const segmentsRoute = router.route.split("/");
    const crumbLinks = CombineAccumulatively(segmentsPath);
    const crumbLabels = CombineAccumulatively(segmentsRoute);

    const crumbs = crumbLinks.map((link, index) => {
      const route = crumbLabels[index];
      const crumb = {
        link: link,
        route: route,
        label: Route2LabelMap[route] || route,
      };
      return crumb;
    });
    setCrumbs(crumbs);

    console.log({
      router,
      segmentsPath,
      segmentsRoute,
      crumbLinks,
      crumbLabels,
      crumbs,
    });
  }, [router.route]);

  return (
    <div className="w-full flex gap-1">
      {crumbs.map((c, i) => {
        return (
          <div className="flex items-center gap-1" key={i}>
            {(i > 0) ? <div>{'>'}</div> : null}
            <div className={(i == (crumbs.length - 1) ? 'bg-blue-300 ' : 'bg-gray-300 ')   " px-2 py-1 rounded-xl"}>
              <Link href={c.link}>
                <a>{c.label}</a>
              </Link>
            </div>
          </div>
        );
      })}
    </div>
  );
}

function CombineAccumulatively(segments) {
  /* 
  when segments = ['1','2','3']
  returns ['1','1/2','1/2/3']
  */
  const links = segments.reduce((acc, cur, curIndex) => {
    const last = curIndex > 1 ? acc[curIndex - 1] : "";
    const newPath = last   "/"   cur;
    acc.push(newPath);
    return acc;
  }, []);
  return links;
}

Отрисованные панировочные сухари

В этом случае отображается либо маршрут, либо метка, если она существует в Route2LabelMap переменной, как это делает «Your Barrels».

Ответ №3:

     const router = useRouter()
    const linkPath = router.asPath.split('/');
    linkPath.shift();

    const pathArray = linkPath.map((path, i) => {
        return { breadcrumb: path, href: '/'   linkPath.slice(0, i   1).join('/') };
    });
    console.log(pathArray)

1. Хорошее решение. Как добавить сюда маршрут домашней страницы?

2. Вам нужно добавить его «вручную», потому что на вашей домашней странице есть URL-адрес «/». Итак, когда вы создаете компонент для показа pathArray , вы просто добавляете в начале <Link> с домашней страницы

Ответ №4:

Установка

 yarn add nextjs-antd-breadcrumbs

Использование

Компонент должен использоваться в Next.js и не будет работать в обычном React. Он всегда будет отображать динамическую навигацию по хлебным крошкам, основанную на текущем пути к следующему маршрутизатору.

 import React from 'react';
import Breadcrumbs from 'nextjs-antd-breadcrumbs';

const Example = () => {
  return <Breadcrumbs rootLabel="Home" omitRootLabel={false}/>;
};

Ответ №5:

Я думал об использовании nextjs breadcrumbs, но мне не удалось согласовать его стиль с antd (Ant Desing). И хотел использовать компонент breadcrumb по умолчанию, который предоставлял antd, таким образом, возвращая какой-то собственный простой компонент, который использует next js router и некоторый фрагмент js.

 const router = useRouter();
let routes= router.route.split('/');
let str='';
let hlinks=[];
routes.forEach((i,index,arr)=>{
    if(i.charAt(0)=='[')
    {
        i=i.slice(1);
        i=i.slice(0, i.length - 1);
        console.log(i)
        arr[index]=router.query[i];
    }
    str=str arr[index] '/';
    hlinks.push(str);
});
console.log(hlinks);
console.log(routes);

Ответ №6:

Вы можете использовать хлебные крошки со следующим JS, как показано ниже:

 import { Breadcrumb } from "antd";
import styles from "../styles/Home.module.scss";
import { useRouter } from "next/router";
import React from "react";
import Link from "next/link";
import { HomeOutlined } from "@ant-design/icons";

const BreadcrumbComp = () => {
  const router = useRouter();
  const value = router.asPath.toLowerCase().split("/");
  console.log(value);

  const path = value.map(
    (value) => value.charAt(0).toUpperCase()   value.substring(1).toLowerCase()
  );

  return (
    <div>
      <Breadcrumb className={styles.breadcrumb}>
        <Breadcrumb.Item>
          <Link href="/home">
            <HomeOutlined />
          </Link>
        </Breadcrumb.Item>
        <Breadcrumb.Item>{path[1]   " / "   path[2]}</Breadcrumb.Item>
      </Breadcrumb>
    </div>
  );
};

export default BreadcrumbComp;

Ответ №7:

Вы можете реализовать хлебные крошки в Next JS с дизайном Antd, как показано ниже:

 import { Breadcrumb } from "antd";
import styles from "../styles/Home.module.scss";
import { useRouter } from "next/router";
import React from "react";
import Link from "next/link";
import { HomeOutlined } from "@ant-design/icons";

const BreadcrumbComp = () => {
  const router = useRouter();
  const value = router.asPath.toLowerCase().split("/");
  console.log(value);

  const path = value.map(
    (value) => value.charAt(0).toUpperCase()   value.substring(1).toLowerCase()
  );

  return (
    <div>
      <Breadcrumb className={styles.breadcrumb}>
        <Breadcrumb.Item>
          <Link href="/home">
            <HomeOutlined />
          </Link>
        </Breadcrumb.Item>
        <Breadcrumb.Item>{path}</Breadcrumb.Item>
      </Breadcrumb>
    </div>
  );
};

export default BreadcrumbComp;