Javascript 如何处理面包屑？

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

-> index.js

-> jobsearch.js

-> jobdescription.js

场景：

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

One:他们可以直接点击任何工作，进入工作描述页面

两个：他们可以进入工作搜索页面，通过点击搜索页面中的任何工作，他们可以进入工作描述页面

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

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

/
作业-{router.query.jobId}

这将导致显示

主页/工作搜索/JobId

要求：

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

否则，如果从主页导航到搜索页面，然后导航到工作描述页面，则面包屑是有效的

工作片段：

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

非常感谢

编辑：

希望对问题进行编辑，并更清楚地阐明预期结果

预期结果：

场景1:

->单击主页上的任何作业，例如，

job-Three

（请注意，我没有进入求职页面），然后它将重定向到job 说明页

->所以现在面包屑需要像

Home/Job-Three

---

场景2:

->单击主页

中文本中的搜索页面链接，单击此处转到搜索页面

，导航到搜索页面并单击任何 搜索页面中的作业，例如，

作业-三个（请注意我已经离开了
到工作搜索页面），然后它将重定向到工作描述页面

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

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

jobSearch.js

将布尔标志状态添加到
链接

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

上面链接的沙盒已更新以使用此修复程序。
您可以使用动态数据渲染面包屑。我刚刚为你创建了一个原型

它将适用于任何页数。您只需将数据传递到
Breadcrumb
组件，如下所示


const breadcrumbsData=[
{
标签：“搜索”，
路径：“/jobsearch”，
},
];
//Breadcrumb.js
从“React”导入React；
从“下一个/链接”导入链接；
常量面包屑=（{data}）=>{
返回(


{data.length-1！==i&&
/
}
);
})}
);
};
导出默认面包屑；
Bro谢谢你的帮助。。但这并不像预期的那样，兄弟。原因是如果我进入求职页面，然后单击任何一份工作，那么面包屑需要类似于，
Home/Job search/JobId
，但在您的解决方案中，它类似于
Home/JobId
。。所以在主页上点击一份工作是正确的（不去搜索页面），但在搜索页面上点击任何一份工作是错误的。我希望你们理解我的要求。。如果需要的话，我可以进一步澄清。我已经用预期的结果编辑了我的问题。。请检查兄弟…@未定义啊，是的。它对我有用，然后我做了一个我认为更优化的编辑，我想我没有完全重新加载项目。我返回到工作代码，更新了答案和链接的沙盒。它没有按预期工作。如果用户单击主页中的任何作业（不进入搜索页面），则面包屑需要类似于
home/job Id
，而在您的解决方案中，无论何种情况，
job search
页面都显示在中间。。在面包屑中，我们只能显示用户以前从主页访问的页面。。我甚至没有进入求职页面，只是在主页上点击一份工作，那么如何才能在工作描述页面中显示面包屑中间的
求职
？因为我根本没有进入搜索页面。为了清晰起见，我编辑了我的问题，并获得了预期的结果。我明白了，我会稍后检查并更新答案。我知道，您的问题已经得到了回答。我正忙着其他事情。我还更新了CodeSandbox链接。这有点像Drewd reese的回答。谢谢@Drewdreese的回答。我也学到了一些新东西：）
<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>

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

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;