oklas / react-breadcrumbs-dynamic Goto Github PK

Hi, first of all thank you for your hard work with implementing this module.

I have this weird issue where on ONE page the breadcrumb order is messed up, while the rest of the pages are perfectly fine.

Here's some code that might help identify the issue.
The breadcrumbs are declared in the parent component along with 2 base items:

          <BreadcrumbsItem to="/">Home</BreadcrumbsItem>
          <BreadcrumbsItem to="/dashboard">
            <i className="material-icons">chevron_right</i>User
          </BreadcrumbsItem>
          <Breadcrumb />
          <div className="main">
            <Switch>
              <Route path="/dashboard" component={Dashboard} />
              <Route path="/risk-assessment" component={RiskAssessment} />
              <Route path="/bank-accounts" component={BankAccount} />
              <Route path="/scoring-decision" component={ScoringDecision} />
              <Route path="/financial-light" component={FinancialLight} />
              <Route path="/cle" component={CreditLineEstimations} />
            </Switch>
          </div>

All the pages have the BreadcrumbsItem on top of the page as in the examples and they work fine except the CreditLineEstimations page which shows them as:
Home > Credit line estimations > User
instead of
Home > User > Credit line estimations

the page render jsx starts as:

<div>
        <BreadcrumbsItem to="/cle">
          <i className="material-icons">chevron_right</i>Credit line estimations
        </BreadcrumbsItem>
...

PS: don't mind the separator added in the BreadcrumbsItem, it's wrong and it'll be fixed

When using JEST, a exception will be thrown if is used.

class xx {
render (){
return (
<BreadcrumbsItem key="1" to="/test/tt">
test
</BreadcrumbsItem>
);
}
}

TypeError: Cannot read property 'add' of undefined
at node_modules/react-through/lib/throughAgent.js:103:42
at Array.forEach ()
at ThroughAgent._this.update (node_modules/react-through/lib/throughAgent.js:101:15)
at Object.ThroughAgent._this.item (node_modules/react-through/lib/throughAgent.js:74:17)
at ThroughAgent._this.configureItem.notused [as configureItem] (node_modules/react-through/lib/throughAgentFactory
.js:75:21)
at ThroughAgent.componentWillMount (node_modules/react-through/lib/throughAgentFactory.js:87:14)
at callComponentWillMount (node_modules/react-dom/cjs/react-dom.development.js:11507:14)
at mountClassInstance (node_modules/react-dom/cjs/react-dom.development.js:11590:5)
at updateClassComponent (node_modules/react-dom/cjs/react-dom.development.js:13145:7)
at beginWork (node_modules/react-dom/cjs/react-dom.development.js:13824:14)
at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:15863:12)
at workLoop (node_modules/react-dom/cjs/react-dom.development.js:15902:24)
at renderRoot (node_modules/react-dom/cjs/react-dom.development.js:15942:7)
at performWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:16560:22)
at performWork (node_modules/react-dom/cjs/react-dom.development.js:16482:7)
at performSyncWork (node_modules/react-dom/cjs/react-dom.development.js:16454:3)
at requestWork (node_modules/react-dom/cjs/react-dom.development.js:16354:5)
at scheduleWork$1 (node_modules/react-dom/cjs/react-dom.development.js:16218:11)
at scheduleRootUpdate (node_modules/react-dom/cjs/react-dom.development.js:16785:3)
at updateContainerAtExpirationTime (node_modules/react-dom/cjs/react-dom.development.js:16812:10)
at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:16839:10)
at ReactRoot.Object..ReactRoot.render (node_modules/react-dom/cjs/react-dom.development.js:17122:3)
at node_modules/react-dom/cjs/react-dom.development.js:17262:14
at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:16679:10)
at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:17258:5)
at Object.render (node_modules/react-dom/cjs/react-dom.development.js:17317:12)
at Object.render (node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:218:50)
at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:130:16)
at Object.mount (node_modules/enzyme/build/mount.js:21:10)
at mountDocumentation (tests/xxx/Documentation/Documentation.test.tsx:28:23)
at Object.beforeEach (tests/xxx/Documentation/Documentation.test.tsx:35:32)

I instantiated the <Breadcrumbs /> without any props, on one of my pages in a react-router-dom v4 app.

Through.updateArea
C:/code/ta/react-admin-frontend/node_modules/react-through/lib/Through.js:147
  144 |   key: 'updateArea',
  145 |   value: function updateArea(area) {
  146 |     if (this.unsubscribe) this.unsubscribe();
> 147 |     if (area) this.unsubscribe = this.context.through.subscribe(area, this.doUpdate);
      | ^  148 |   }
  149 | }, {
  150 |   key: 'render',

Hi!
As I understand all breadcrumbs items are sorted by pathname by the following function:
https://github.com/oklas/react-breadcrumbs-dynamic/blob/master/src/index.js#L47

So it's not so easy to control order of breadcrumbs item in the Container component. In my case it is necessary for adding routes with absolute links. Something like weight parameter

I will be glad to make a new PR after your agreement

Hello,

Is it possible to have a compound item, as final item?

Example:

finalItem={'span > strong'}

Thanks

Looks like there's a small discrepancy with containerProps and containerParams.

Thanks for the library!

Good evening, I have an issue with accessing breadcrumb data in my routes. Is it possible to go one step back according to its data and how can we get the data ? Thank you.

const myComponent = (props) => {
     const breadcrumbProps = props.something*
     const prevPath = breadcrumbProps.map(...)* || breadcrumbProps.prevPath*

     return (
          <Fragment>
                  <BreadcrumbsItem to={ somePathname }>Current Breadcrumb</BreadcrumbsItem>

                  <button onClick={() => goToPrevPath(prevPath)}>
                       Back
                  </button>
          </Fragment>
    )
}

Im using react loadable in my project , after installed react-breadcrumbs-dynamic and configured it like documents breadcrub just show the current item neither the others

FYI @oklas

I wrote the TypeDefinition for your project.
and now we can use that as npm module.

npm install @types/react-breadcrumbs-dynamic

let me know if it has any problem. 👍

please close it after reading.

Noticed that this library throws a warning for unmet peer dep when used with React 16.

I have
"react-breadcrumbs-dynamic": "^1.2.1",
"react-through": "^1.1.4",

And have the Warning in console

Legacy context API has been detected within a strict-mode tree.

The old API will be supported in all 16.x releases, but applications using it should migrate to the new version.

Please update the following components: ThroughAgent

Learn more about this warning here: https://fb.me/react-legacy-context
    in ThroughAgent

Just wondering if this is safe to be used along with redux or will it cause any possible issues ?

I am adding one attribute(name as:depth) to BreadcrumbsItem and changing order of BreadcrumbsItems. its perfectly working in chrome after reloading successfully. But while testing in firefox it giving rendomly displaying.

BreadcrumbsItem to="/" depth="1" depth="2" depth="3"

to render in order i wrote code in Breadcrumbs
<Breadcrumbs
separator={ / }
item={Link}
finalItem={'b'}
compare={function(a,b){
if(parseInt(a.depth)< parseInt(b.depth)){
return -1;
}
return 0;
}}
/>

Hi,

First of all really nice what you've done.
i have a suggestion for a feature / improvement.
We could add ...props to item to allow us to pass custom props (style more precisely for my case !!) to it.

use cases
I have a NavLink if i want to style it to not have any decoration in the text i have to do :

const Nav = props => (
  <NavLink
    {...props}
    style={{ textDecoration: 'none' }} >
    {props.children}
  </NavLink>
);

<Breadcrumbs separator={<strong> / </strong>} item={Nav} finalItem="strong" />

How to solve it
Add for example itemProps to Breadcrumbs

const itemProps = props.itemProps 

    <Container {...containerProps}>
      {itemsValue.map((itemValue, i) => {
        return i+1 < count ? (
          separator ? (
            <span key={i}>
              <Item {...prepareProps(itemValue, rename, duplicate, remove)} {...itemProps} />
              {separator}
            </span>
          ) : (
            <Item key={i} {...prepareProps(itemValue, rename, duplicate, remove)} {...itemProps} />
          )
        ) : (
          <FinalItem key={i}
            {...prepareProps(itemValue, rename, duplicate, remove)}
            {...finalProps}
          />
        )
      })}
    </Container>

Hello and thanks for the great library, looks good so far.

I have a bit of an issue trying to make breadcrumbs clickable. I am using reactstrap as the display component for breadcrumbs. So I have a breadcrumbs component:

  <Breadcrumbs
     item={BreadcrumbItem}
     container={Breadcrumb}
     finalProps={{ active: true }}
  />

Breadcrumb and BreadcrumbItem are component from reacstrap.

And on the pages, I render for example

   <BreadcrumbsItem
          to={`/someroute`}>
          Equipment
   </BreadcrumbsItem>

This renders fine, but clicking the breadcrumbs does nothing, which I assume is because they are not rendered as links then.

I'm sure I am just misunderstanding something and this is not a huge issue, but if you could help clear this issue out it would be great.

Thanks in advance.

EDIT:

So I got some progress done by making a wrapper component like this:

const WrapperBread = ({ ...props }) => {
  return (
    <BreadcrumbItem {...props} tag={NavLink} />
  );
}

Now the only issue seems to be that all of the breadcrumbs are marked as "active" all the time, which worked before I started using this wrapper component.

This bug appeared in version 1.0.11
Bug Demo: https://andrewguscha.github.io/react-breadcrumbs-bug-demo/index.html#/
Bug Source: https://github.com/andrewGuscha/react-breadcrumbs-bug-demo/blob/master/src/App.js

1. Breadcrumbs renders correctly with this steps: Home->About->Components
2. Breadcrumbs renders incorrectly with this steps: Home->Topics->Components
   With this steps, BreadcrumbItem 'Topics' didn't appear.

Hi,

Prop changes for children aren't being displayed properly. I think there's a problem in componentWillReceiveProps.

Awesome component btw!

That's an awesome package, really
But, could you use semantic versioning cuz your last versions have broken my builds
Thanks!

Hi, I don't know what I'm doing wrong. I run the example locally and it works perfectly, but when i try to implement it in my project does not work :(, I am using all the default props. Any help?

It should be rendering Home / Table / Create but is rendering only the last item

• App.js

• Body.js

• ABMMain.js

• ABMCrear.js

using V1.2.0 I have this warning with React V16.9.0.

Is it possible guys to fix that ?

Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

• Move code with side effects to componentDidMount, and set initial state in the constructor.
• Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: ThroughAgent, ThroughAgent.breadcrumbs

I have three pages

• Home (Don't need breadcrumbs)
• Products
• Product Details
  So, what I'm trying to achieve that to hide breadcrumb on the home page but other pages should have breadcrumb trail with home link.

Hi, react-breadcrumbs-dynamic does not work with React.lazy.

The lib offers a compare prop but it is not defined in types. Due to this it throws a type error while using in typescript.

So now I used withBreadcrumbsContainer to hide the container.
Any plans for this? I think hideIfEmpty props will be ok.

Is their any examples that use this package but doesn't use react router. for example I want to make an app that uses react router but I don't want the url to change with the breadcrumbs. I want the path to show in the breadcrumbs not url.

Hi

I have the Project page with route/project/:projectId and Task page with route /task/:taskId. Project page contains the list of tasks and clicking on it redirects the user to the Task page.
Those two pages have independent routes, defined on the top level. When displaying Task page I want to have a breadcrumb project_name -> task_name which requires some custom logic because the library will not display the whole chain since Task route is not nested inside the Project route.

How I can achieve that?

If I try to do ReactDOMServer.renderToString, my app breaks because of this line:

<BreadcrumbsItem to='/'>Home</BreadcrumbsItem>

The error is:

Unhandled Rejection (TypeError): Cannot read property 'add' of undefined