javascript - 如何处理面包屑？

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？由于我对这种情况完全陌生，请帮助我实现管理面包屑的结果。

提前致谢..

编辑:

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

预期结果:

场景 1:

-> 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

---

场景 2:

-> 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

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

求职搜索

将 bool 标志状态添加到 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 路由/导航库一样)，选项是通过文字 URL 发送它，或临时将链接状态存储在本地/ session 存储中或应用程序状态(例如 redux)。参见 this链接状态请求的 github 问题。

编辑

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

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

上面链接的沙箱已更新为使用此修复。