如何处理面包屑？

Question

我正在制作一个简单的 react/next js 应用程序，其中总共有三个页面。

-> index.js

-> jobsearch.js

-> jobdescription.js

场景：

-> 在主页中，用户有两个选项，

One: They can directly click on any job and go to job description page.

Two: They can go to job search page and the by cliking on any job in search page, they can go to job description page

最后，当用户到达职位描述页面时，会显示面包屑，

  <nav className="container">
    <ol className="list-reset py-4 pl-4 rounded flex bg-grey-light text-grey">
      <li className="px-2">
        <Link
          href={{
            pathname: "/"
          }}
        >
          <a className="text-gray-600 no-underline text-indigo">Home</a>
        </Link>
      </li>
      <li>/</li>
      <li className="px-2">
        <Link
          href={{
            pathname: "/jobsearch"
          }}
        >
          <a className="text-gray-600 no-underline text-indigo">
            Search Page
          </a>
        </Link>
      </li>
      <li>/</li>
      <li className="px-2"> Job - {router.query.jobId} </li>
    </ol>
  </nav>

这导致显示 Home / Job Search / JobId。

要求：

If navigated to job description page directly from home page then the middle breadcrumb (Search Page) Should not be displayed and the breadcrumb needs to be like Home / Job - JobId

Else the breadcrumb is valid if navigated from Home to search page then to job descrition page.

工作代码段：

是否可以在访问职位描述页面时跟踪上一页 url？由于我对这种情况完全陌生，请帮助我实现管理面包屑的结果。

非常感谢..

编辑：

想编辑问题并更清楚地阐明预期结果。

预期结果：

场景一：

-> Click any job from home page, eg.., Job -Three (Please note here I didn't go to job search page) then it will redirected to job description page.

-> So now the breadcrumb needs to be like Home/ Job - Three

场景二：

-> Click on search page link from the text in home page Click here to go to Search Page and navigate to search page and click on any job from search page, eg.., Job -Three (Please note here I gone to job search page) then it will redirected to job description page.

-> So now the breadcrumb needs to be like Home / Job Search / Job - Three

Answer 1

浏览器维护历史堆栈。我认为处理堆栈的工作量会超过它的价值。一个更简单的解决方案可能是只发送一些额外的路由状态来指示用户从哪里转换的描述页面。

jobSearch.js

将布尔标志状态添加到 Link。

<Link
  href={{
    pathname: "/jobdescription",
    query: {
      jobId: item,
      fromSearch: true // <-- navigating from the search page
    },
  }}
>

jobDescription.js

有条件地在路由状态上呈现中间的“搜索页面”面包屑。

<ol className="list-reset py-4 pl-4 rounded flex bg-grey-light text-grey">
  <li className="px-2">
    <Link
      href={{
        pathname: "/"
      }}
    >
      <a className="text-gray-600 no-underline text-indigo">Home</a>
    </Link>
  </li>
  {router.query.fromSearch && (
    <>
      <li>/</li>
      <li className="px-2">
        <Link
          href={{
            pathname: "/jobsearch"
          }}
        >
          <a className="text-gray-600 no-underline text-indigo">
            Search Page
          </a>
        </Link>
      </li>
    </>
  )}
  <li>/</li>
  <li className="px-2"> Job - {router.query.jobId} </li>
</ol>

注意： 这会将额外的“状态”作为查询字符串的一部分发送。由于 Nextjs Link 组件不支持路由状态（与其他 React routing/navigation 库一样），选项是通过文字 URL 发送它，或者临时存储 link local/session 存储或应用状态中的状态（例如 redux）。有关 link 状态的请求，请参阅 this github 问题。

编辑

我找到了一个“解决方法”，允许您发送额外的查询参数，但在地址栏中显示自定义 URL。使用可选的 as 装饰器。确实重复了一些工作，但至少对可能为 URL.

添加书签的用户有用

<Link
  href={{
    pathname: "/jobdescription",
    query: {
      jobId: item,
      fromSearch: true // <-- navigating from the search page
    },
  }}
  as={`/jobDescription?jobId=${item}`}
>

以上 linked 沙箱已更新为使用此修复。

Answer 2

您可以使用动态数据来呈现面包屑。我刚刚为你创建了一个原型。

它适用于任意数量的页面。您只需要将数据传递给 Breadcrumb 组件，如下所示

https://codesandbox.io/s/distracted-ritchie-8y6ll

const breadcrumbsData = [
  {
    label: "Search",
    path: "/jobsearch",
  },
];


 // Breadcrumb.js


import React from "react";
import Link from "next/link";

const Breadcrumbs = ({ data }) => {
  return (
    <nav className="container">
      <ol className="list-reset py-4 pl-4 rounded flex bg-grey-light text-grey">
        <li className="px-2">
          <Link href="/">
            <a className="text-gray-600 no-underline text-indigo">Home</a>
          </Link>
        </li>
        <li>/</li>

        {data.map(({ path, label }, i) => {
          return (
            <React.Fragment key={i}>
              <li className="px-2">
                <Link href={path}>
                  <a className="text-gray-600 no-underline text-indigo">
                    {label}
                  </a>
                </Link>
              </li>

              {data.length - 1 !== i && <li>/</li>}
            </React.Fragment>
          );
        })}
      </ol>
    </nav>
  );
};

export default Breadcrumbs;

如何处理面包屑？

How to handle breadcrumbs?

javascript

breadcrumbs

reactjs

next.js

编辑