如何处理面包屑? [英] How to handle breadcrumbs?

问题描述

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

I am making a simple react/next js application where I am having totally three pages.

-> index.js

-> jobsearch.js

-> jobdescription.js

场景:

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

-> In home page there is two option for user,

一个:他们可以直接单击任何职位，然后转到职位描述页面.

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

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

And finally when user reached the job description page, the breadcrumb is shown like,

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

要求:

如果直接从主页导航到职位描述页面，则中间面包屑(搜索页)不应显示和面包屑需要像家庭/工作-JobId

否则，如果从首页导航到搜索页面，然后导航到工作说明页面，则面包屑有效.

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

有效代码段:

在访问职务说明页面时是否有可能跟踪上一页的网址?由于我是这种情况的新手，请帮助我实现管理面包屑的结果.

Is there any possibility to track the previous page url while visiting job description page? As I am entirely new to this scenario, kindly please help me to achieve the result of managing breadcrumb.

非常感谢.

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

Would like to edit the question and clarify expected result bit more clear.

预期结果:

场景1:

->单击主页上的任何作业，例如.. Job -Three (请注意，我没有进入作业搜索页面)，它将被重定向到作业说明页面.

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

->所以现在面包屑需要像 Home/Job-Three

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

---

方案2:

->单击主页上的文本中的搜索页面链接单击此处转到搜索页面，然后导航到搜索页面，然后单击任意搜索页面中的作业，例如，. 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.

->所以现在面包屑需要像 Home/Job Search/Job-Three

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

推荐答案

浏览器维护历史记录堆栈.我认为要处理堆栈要付出更多的努力.一个更简单的解决方案可能是只发送一些额外的路由状态，以指示用户从其过渡到的描述页面.

The browser maintains the history stack. I think it'd be more work than it's worth to process the stack. An easier solution may be to just send some extra route state to indicate to the description page where the user transitioned from.

jobSearch.js

jobSearch.js

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

Add a boolean flag state to the Link.

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

jobDescription.js

jobDescription.js

有条件地呈现中间的搜索页面"路径状态上的面包屑.

Conditionally render the middle "Search Page" breadcrumb on the route state.

<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 组件不支持路由状态(如其他反应路由/导航库一样)，因此可以通过文字网址发送它，也可以将链接状态临时存储在本地/会话存储中，或者应用状态(例如redux).有关链接状态的请求，请参见此 github问题.

Note: This sends the extra "state" as part of a query string. Since Nextjs Link components don't support route state (like other react routing/navigation libraries) the options are to send it via the literal URL, or to temporarily store the link state in local/session storage or app state (e.g. redux). See this github issue for the request for link state.

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

I found a "workaround" that allows you to send extra query parameters yet display a custom URL in the address bar. Use the optional as decorator. this does duplicate some of the work, but will at least work for users who may bookmark the URL.

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

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

The above linked sandbox is updated to use this fix.

这篇关于如何处理面包屑?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！