How to handle breadcrumbs?

问题

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

-> index.js

-> jobsearch.js

-> jobdescription.js

Scenario:

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

And this results in displaying Home / Job Search / JobId.

Requirement:

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.

Working Snippet:

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.

Big thanks in advance..

Edit:

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

Expected Result:

Scenario 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

---

Scenario 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

回答1:

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

Add a boolean flag state to the Link.

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

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>

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.

Edit

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.

回答2:

You can use dynamic data to render Breadcrumbs. I just created a prototype for you.

It will work for any number of pages. You only need to pass data to Breadcrumb component like following

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;

来源：https://stackoverflow.com/questions/65686844/how-to-handle-breadcrumbs